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Глава 1 Современное программирование на ЗаѵаЗсгірі 

Развитие ІаѵаЗсгірі шло постепенно, но имело постоянный характер. За прошедшее десятилетие 
восприятие ІаѵаЗсгірІ изменилось от простого, игрушечного до вполне уважаемого языка программирования, 
используемого по всему миру корпорациями и разработчиками для создания великолепных приложений. 
Современный ІаѵаЗсгірІ такой же, каким был всегда — цельный, надежный и невероятно мощный язык 
программирования. Многое из того, что рассматривается в этой книге, станет демонстрацией всего, что отличает 
современные ІаѵаЗсгірі-приложения от их предшественников. Многие из представленных в этой главе идей при 
всем своем развитии уже не новы, но то признание, которое они завоевали у тысяч способных программистов, 
помогло усовершенствовать методы их применение и сделать их более современными. Итак, давайте без лишних 
слов приступим к рассмотрению современного программирования на ІаѵаЗсгірІ:. 

Объектно-ориентированный ЛаѵаЗсгірі 

С точки зрения языка, вы не найдете здесь абсолютно ничего нового ни об объектно-ориентированном 
программировании, ни об объектно-ориентированном ІаѵаЗсгірІ, поскольку этот язык с самого начала создавался 
как полностью объектно-ориентированный. Тем не менее, по мере того, как ІаѵаЗсгірІ «развивается» в своем 
применении и признании, программисты, работающие на других языками (таких как КиЬу, РуІІпоп и РегІ) его 
заметили и стали переносить на него свои приемы программирования. 

Объектно-ориентированный код ІаѵаЗсгірІ по внешнему виду и поведению отличается от кода, 
написанного на других языках, поддерживающих объектное программирование. Углубленное рассмотрение этого 
вопроса и различных аспектов, составляющих уникальность языка, я планирую во второй главе, а теперь, чтобы 
получить представление о том, как пишется современный код ІаѵаЗсгірІ, давайте обратимся к некоторым основам. 
В листинге 1.1 приведены примеры двух объектных конструкторов, показывающих образование пары объектов, 
пригодной для использования в учебном процессе. 

Листинг 1.1. Объектно-ориентированный ІаѵаЗсгірі, представляющий лекции и расписание их проведения 

// Конструктор для нашей лекции — 'Ьесбиге' 

// принимает две строки — паше и беасЬег 
бипсбіоп Ьесбиге( паше, беасЬег ) { 

// Сохранение строк в качестве локальных свойств объекта 
ІЬіз.паше = пате; 

Шз . беасбег = беасбег; 

} 

// Метод класса Ьесбиге, используемый для генерации 

// строки, которую можно использовать для отображения информации о лекции 
Ьесбиге . ргобобуре . бізріау = бипсбіоп(){ 

гебигп ббіз . беасбег + " преподает " + бЬіз.пате; 

} ; 

// Конструктор расписания лекций, принимающий 

// массив лекций 

іипсбіоп ЗсЬесІиІе ( Іесбигез ) { 

Шз . Іесбигез = Іесбигез; 

} 


// Метод, предназначенный для построения строки, представляющей 
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// расписание лекций 

Зсііесіиіе . ргобобуре. сіізріау = бипсбіоп () { 
ѵаг збг = 

// Перебор всех лекций, построение 
// информационной строки 

іог ( ѵаг і = 0; і < біііз.Іесбигез.Іепдбіі; і++ ) 
збг += бЬіз . Іесбигез [ і ]. сіізріау () + " 

гебигп збг; 

} ; 


При просмотре Листинга 1.1 можно заметить, что в его коде присутствует большинство основных 
элементов объектно-ориентированного программирования, которые по сравнению с элементами других, более 
распространенных языков объектно-ориентированного программирования структурированы несколько по- 
другому. Вы можете создавать конструкторы объектов, методы, обращаться к свойствам объектов и извлекать их 
значения. Пример использования в приложении двух классов показан в Листинге 1.2. 

Листинг 1.2. Предоставление пользователю списка классов 

// Создание нового объекта расписания — Зсііесіиіе и его сохранение в 

// переменной ' шуЗсііесіиІе ' 

ѵаг шуЗсііесіиІе = пем Зсііесіиіе ( [ 

// Создание массива объектов Ьесбиге, который передается 

// объекту Ьесбиге как единое свойство 

пей Ьесбиге ( "Суш", "Мг. Зшібіт" ), 

пем Ьесбиге ( "МабП", "Мгз. ііопез" ), 

пем Ьесбиге ( "Епдіізіі", "ТВБ" ) 

] ) ; 

// Отображение информации о расписании в виде всплывающего уведомления 
аіегб ( туЗсііесІиІе . сіізріау () ); 

С завоеванием признания ІаѵаЗсгірі в программистской среде, стало более популярным использование 
качественно спроектированного объектно-ориентированного кода. Я попытаюсь наполнить всю книгу различными 
показательными фрагментами объектно-ориентированного кода ІаѵаЗсгірі, которые, как я считаю, лучше всего 
проиллюстрируют разработку и реализацию кода. 

Тестирование кода 

После определения качественной объектно-ориентированной базы программного кода, вторым аспектом 
разработки профессионального кода ІаѵаЗсгірі является обеспечение надежной среды тестирования. Потребность 
в качественном тестировании становится особенно очевидной при разработке кода, который будет активно 
использоваться или поддерживаться другими разработчиками. Проведение тестирования с целью закладки 
надежной базы для других разработчиков — неотъемлемая составляющая практики разработки поддерживаемого 
программного кода. 

В главе 4 будут рассмотрена различные инструменты, пригодные для создания нужных режимов 
тестирования и эксплуатации, а также простая отладка сложных приложений. Один из таких инструментов — 
дополнительный модуль РігеЬид для РігеГох. Этот модуль предоставляет целый ряд полезных инструментов, 
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среди которых консоль ошибок, регистрация НТТР-запросов, отладка и обследование элементов. На рис. 1.1 
показана реальная копия экрана дополнительного модуля РігеЬид в режиме отладки кодового фрагмента. 

шаг* сиггѵтгу тоіпд лі і яо |іѵт»| о» уочг лглл яо 

> т»||в в тепа бтч »»» гимшл сет і ядтд-о »гтл сгк і ы»с ктц. цуп <тчуч 

Т«лп> дИш-РганиРдНу-Ркишп Раса» -Ооат Нате 


Смиіі ОіЫ«н>' Імресиі Ч, 



Рис. 1.1. Копия экрана, иллюстрирующая работу дополнительного модуля РігеГох РігеЬид 

Важность разработки свободного от ошибок и хорошо тестируемого кода невозможно переоценить. Как 
только вы приступите к разработке высококачественного объектно-ориентированного кода и подберете для него 
надлежащий набор программ для тестирования, я уверен, что вы согласитесь с этим утверждением. 

Создание пакета распространения 

Завершающим аспектом разработки современного, профессионального кода ІаѵаЗсгірІ является создание 
пакета программного кода с целью его распространения или реального применения. Поскольку разработчики 
стали применять на своих страницах все больше кода ІаѵаЗсгірІ:, возросла вероятность возникновения 
конфликтных ситуаций. Если в каждой из двух ІаѵаЗсгірІ-библиотек есть переменная по имени баіа, или в обеих 
из них решено добавить различную обработку одного и того же события, то могут возникнуть фатальные 
конфликты и трудноопределимые ошибки. 

Идеальный вариант создания качественной ІаѵаЗсгірі-библиотеки дает разработчикам возможность просто 
указать на нее, используя <5спр1>-тег, и быть уверенным, что она заработает, не требуя никаких изменений. 
Чтобы обеспечить качество и универсальную совместимость своего кода, разработчики используют ряд 
технологий и решений. 

Наиболее распространенной технологией устранения помех и влияния на код со стороны другого кода 
ІаѵаЗсгірі, является использование пространства имен. Элементарным (но не обязательно лучшим или наиболее 
полезным) примером его применения является общедоступная библиотека пользовательского интерфейса, 
разработанная компанией Ѵабоо. Пример использования этой библиотеки показан в листинге 1.3. 

Листинг 1.3. Добавление обработчика события, используя библиотеку Ѵабоо III, обладающую развитым 
пространством имен 

// Добавление обработчика события тоизеоѵег для элемента, имеющего 
// в качестве ІБ значение 'Ъобу' 

УАНОО. ибіі . Еѵепб . асМЫзбепег ( ' Ъобу' , ' тоизеоѵег ' , Дипсбіоп () { 


}) ; 


// и изменение фонового цвета элемента на красный 
ІЬіз . збуіе . ЬаскдгоипбСоІог = 'гесі'; 
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Но у такого метода использования пространства имен есть одна проблема, заключающаяся в отсутствии 
какой-либо внутренней согласованности между библиотеками относительно порядка или структуры их 
использования. И здесь особую роль приобретают централизованные хранилища кода, такие как 15АЫ (ІаѵаЗсгірІ 
АгсМіѵе ИеЬѵѵогк). Это хранилище предоставляет согласованный набор правил для структурируемых библиотек, а 
также способ быстрого и легкого импорта других библиотек, от которых зависит работа вашего кода. Копия 
экрана основного центра распространения 15АИ показана на рис. 1.2. Обсуждение всех хитросплетений 
разработки свободного от ошибок, пригодного для создания пакетов распространения кода предстоит в главе 3. В 
дополнение к этому внимательное отношение к другим, часто встречающимся «камням преткновения», среди 
которых противоречия, возникающие при обработке событий, будет рассмотрено в главе 6. 




Оосіипепіаіммі 


«ІаѵаЗсгірі АгсЬіѵе Ыеіѵуогк 


"СРАМ” .герІасеС/СР/, 
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Рис. 1.2. Копия экрана общедоступного хранилища кода 15АЫ 


Ненавязчивое создание ООМ-сценариев 

Построение продукта на основе качественного, тестируемого кода и совместимого пакета распространения 
является концепцией ненавязчивого создания ООМ-сценария. Написание ненавязчивого кода предполагает 
полное отделение от вашего НТМЬсодержимого: от данных, приходящих с сервера, и от кода ІаѵаЗсгірІ, 
используемого для придания им динамичности. Наиболее важный сопутствующий эффект от такого полного 
отделения заключается в том, что теперь вы будете располагать кодом, который всецело поддается упрощению 
или усложнению в зависимости от используемого браузера. Этим можно воспользоваться, предлагая более 
современное содержимое на тех браузерах, которые его поддерживают, и, в то же время, элегантно снижая 
уровень содержимого для браузеров с более скромными возможностями. 

Создание современного, ненавязчивого кода имеет две составляющие: объектную модель документа — 
Ооситепі ОЬіесі МосІеІ (ООМ), и ІаѵаЗсгірІ-события. В этой книге предстоит глубокое рассмотрение их обеих. 
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Объектная модель документа (ООМ) 

00М является весьма распространенным способом представления ХМІ_-документов. Он не самый быстрый, 
легкий или простой в использовании, но это и не обязательно, зато его отличают наибольшая распространенность 
и реализация на большинстве языков, используемых разработчиками веб-приложений (среди которых Іаѵа, РегІ, 
РНР, РиЬу, РуШоп и ІаѵаВсгірІ:). ЭОМ был сконструирован с прицелом на интуитивно понятный для разработчиков 
способ перемещения по ХМІ_-иерархии. 

Поскольку действующий НТМІ_ — это просто подмножество ХМЬ, наличие эффективного способа 
синтаксического разбора и просмотра ООМ-документа абсолютно необходимо для облегчения разработки кода на 
ІаѵаЗсгірі. В конце концов в основном взаимодействие в ІаѵаЗспрІ происходит между кодом ІаѵаЗсгірі и 
различными НТМЬ-элементами, имеющимися на веб-странице, поэтому ООМ является великолепным 
инструментом для упрощения этого процесса. В листинге 1.4. приводится ряд примеров использования ООМ для 
навигации по различным элементам страницы, для их поиска и последующих манипуляций. 

Листинг 1.4. Использование объектной модели документа для определения местоположения различных 
элементов ООМ и манипуляций с ними 

<Ы:ш1> 

<ЬеасІ> 

<бі1;1е>Введение в ВОМ</біб1е> 

<5СГІрб> 

// Мы не можем применять БОМ, 

// пока не загружен весь документ 
иіпсіом . опіоасі = бипсбіоп () { 

// Поиск всех элементов <1і>, имеющихся в документе 
ѵаг 1і = боситепб. дебЕІетепбзВуТадЛате ( "1і" ); 

// и добавление к ним красного обрамления 
бог ( ѵаг ^ =0; ^ < Іі.ІепдбП; ^++ ) { 

1і [^]. збуіе .Ъогбег = "Ірх зоіісі #000"; 

} 

// Определение местоположения элемента, имеющего ІВ 
// со значением 'еѵегуиЬеге' 

ѵаг еѵегу = босишепб .дебЕІетепбВуІсІ ( "еѵегумЬеге" ); 

// и удаление его из документа 

еѵегу. рагепбЛобе . гешоѵеСЬіІсі ( еѵегу ); 

} ; 


</зсгірО 
</Ьеаб> 

<Ьобу> 

<Ы>Введение в ВОМ</М> 

<р с1азз="безб">Существует ряд причин по которым БОМ можно 
считать превосходной моделью, и вот некоторые из них:</р> 
<иі> 

<1і ісІ="еѵегуиЬеге">Ее повсюду можно найти.</1і> 
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<1І с1а55="'Ье5'Ь">0на проста в использовании .</1і> 

<1І с1азз="'Ьез1:">0на способна помочь вам найти что угодно, 
и с завидной быстротой.</1і> 

</и1> 

</Ьобу> 

</Ьбш1> 

БОМ является первым шагом на пути разработки ненавязчивого кода ІаѵаБсгірІ:. Быстрота и простота 
навигации по НТМЬ-документу, приводит к значительному упрощению взаимодействия между ІаѵаБсгірІ: и НТМБ. 

События 

События являются тем самым связующим элементом, который скрепляет все пользовательское 
взаимодействие с приложением. В хорошо сконструированном приложении ІаѵаБсгірі, вы стремитесь получить 
доступ к источнику данных и его визуальному представлению (изнутри НТМІ_ БОМ). Чтобы синхронизировать эти 
два аспекта, вы стараетесь получить возможность отслеживать пользовательские действия, пытаясь в 
соответствии с ними обновлять пользовательский интерфейс. Сочетание использования БОМ и событий 
ІаѵаБсгірі — это фундаментальный союз, придающий всем современным веб-приложениям присущие им свойства. 

Все современные браузеры предоставляют ряд событий, которые заявляют о себе, когда происходят 
какие-то определенные моменты взаимодействия, в частности, перемещение пользователем указателя мыши, 
нажатие клавиш или выход из страницы. Используя эти события, вы можете указать код, который будет выполнен 
при их наступлении. Пример такого взаимодействия показан в листинге 1.5, где фоновый цвет элементов <ІІ> 
изменяется, когда пользователь проводит над ними указателем мыши. 

Листинг 1.5. Использование БОМ и событий для обеспечения визуальных эффектов 


<Нбт1> 

<НеасІ> 

<бі'Ые>Введение в ВОМ</біб1е> 

<зсгірб> 

// Мы не можем применять БОМ, 

// пока не загружен весь документ 
міпсіом . опіоаб = бипсбіоп (){ 

// Поиск всех элементов <1і>, для прикрепления к ним 
// обработчиков событий 

ѵаг 1і = боситепб. дебЕІетепбзВуТадЛате ( "1і" ); 
бог ( ѵаг і = 0; і < Іі.ІепдбН; і++ ) { 

// Прикрепление обработчика события наложения указателя мыши 
// на элемент <1і>, изменяющего фоновый цвет 
// элемента <1і> на синий. 

1і[і] .опшоизеоѵег = бипсбіоп() { 

бПіз . збуіе . ЬаскдгоипсіСоІог = 'Ыие'; 

} ; 


// Прикрепление обработчика события выхода указателя мыши 
// за пределы элемента <1і>, возвращающего фоновому цвету 
// элемента <1і> его исходное белое значение. 
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1і [ і ] . оптоизеоиб = Гипсбіоп() { 

біііз . збуіе . ЬаскдгоипсіСоІог = 'мЬібе'; 

} ; 

} 

} ; 

</зсгірО 
</ЬеасІ> 

<ЪосІу> 

<Ы>Введение в БОМ</Ы> 

<р с1аз5="безб">Существует ряд причин по которым БОМ можно 
считать превосходной моделью, и вот некоторые из них:</р> 

<и1> 

<1і іс!="еѵегумЬеге">Ее повсюду можно найти.</1і> 

<1І с1азз="без1:">0на проста в использовании .</1і> 

<1І с1азз="'Ьез1:">0на способна помочь вам найти что угодно, 
и с завидной быстротой.</1і> 

</Ьобу> 

</Ьбш1> 

События ІаѵаЗсгірі сложны и разнообразны. В том или ином виде они используются в большей части кода 
и приложений, представленных в этой книге. Глава 6 и приложение Б полностью посвящены событиям и их 
взаимодействию. 

.ЗаѵаЗсгірі: и С55 

Создание приложений на основе РОМ и организация взаимодействия с использованием событий 
представляют собой динамический НТМІ_. В своей основе динамический НТМІ_ является взаимодействием, 
осуществляемым между ІаѵаЗсгірі и С55-информацией, прикрепленной к элементам ООМ. 

Каскадные таблицы стилей (Сазсасііпд зіуіе збееіз, С55) служат стандартом разметки простых, обычных 
веб-страниц, который до сих пор предоставляет разработчикам наиболее мощный инструмент созидания, 
доставляя пользователям меньше всего проблем совместимости. В конечном счете, динамический НТМІ_ 
занимается исследованием возможностей организации взаимодействия ІаѵаЗсгірі и С55, и поиском наилучших 
способов использования их сочетания для получения наиболее впечатляющих результатов. 

Некоторые примеры расширенного взаимодействия, в частности, перетаскивание элементов и 
мультипликацию, можно увидеть в главе 7, где они подробно рассматриваются. 

Аіах 


Асинхронный ІаѵаВсгірі и ХМБ, А]ах — это термин, придуманный Джесси Джеймсом Гарретом ^еззе ^тев 
баггей), соучредителем и президентом Асіарбіѵе РаШ, фирмы по разработке архитектуры информационных систем, 
в статье «А]ах: А Иеѵѵ АрргоасИ іо ѴѴеЬ Арріісаііопв» («А]ах: новый подход к веб-приложениям») 
(Іі1;1;р://ѵѵѵѵѵѵ.асіарііѵера1;іі.сот/риЫіса1;іоп5/е55ау5/агсіііѵе5/000385.ріір). В ней описывается расширенное 
взаимодействие, происходящее между клиентом и сервером при запросе и передаче дополнительной информации. 

Термин А)ах охватывает сотни комбинаций обмена данными, но все они концентрируются вокруг основного 
исходного условия: дополнительные запросы делаются от клиента к серверу даже после того как страница 
полностью загружена. Это дает разработчикам приложений дополнительные возможности по организации 
взаимодействия, избавляющие пользователя от медленного, традиционного хода работы приложения. На рис. 1.3 
представлена диаграмма из статьи Гарретта об Аіах, на которой показано, как изменяется поток взаимодействия в 
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пределах приложения благодаря дополнительным запросам, осуществляемых в фоновом режиме (зачастую, без 
ведома пользователя). 

сіаззіс ѵѵеЬ арріісаііоп тосіеі (зупсИгопоиз) 


изег асііѵііу изег асііѵііу изег асііѵііу 



Аіах ѵѵеЬ арріісаііоп тосіеі (азупсЬгопоиз) 



зегѵег-зігіе зегѵег-зійѳ зегѵег-зісіе зегѵег-зісіе 

ргосеззіпд ргосеззіпд ргосеззіпд ргосеззіпд 


Рис. 1.3. Диаграмма из статьи «А)ах: А Иеѵѵ Арргоасіт Іо ѴѴеЬ Арріісаііопз», показывающая расширенное, 
асинхронное взаимодействие, осуществляемое между клиентом и сервером 

Первый выход статьи Гарретта возбудил интерес пользователей, разработчиков, конструкторов и 
управленцев, обусловив бурный рост новых приложений, использовавших существенно расширившийся уровень 
взаимодействия. Как ни странно, несмотря на этот всплеск интереса, технологические приемы, положенные в 
основу А)ах не отличались новизной (и использовались в коммерческих продуктах примерно с 2000 года). Тем не 
менее, главным отличием было использование в прежних приложениях средств связи с сервером, присущих 
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конкретному браузеру (например, свойств, имевшихся только в Іпіегпеі Ехріогег). С тех пор, как все современные 
браузеры стали поддерживать ХМШИрКециез! (основной метод отправки или получения ХМІ_-данных с сервера), 
игровое поле было выровнено, позволяя всем получать удовольствие от преимуществ применения новой 
технологии. 

Если говорить о компании, занимающей передовые позиции по созданию впечатляющих приложений, в 
которых используется технология А)ах, то в первую очередь следует упомянуть Соодіе. Еще до выхода первой 
статьи по А)ах эта компания создала чрезвычайно интерактивную демонстрационную версию — Соодіе Зиддеві, 
позволяющую вводить запрос и получать в режиме реального времени возможность его автозавершения. 
Получить это свойство при использовании старой системы перезагрузки страницы было невозможно. Копия 
экрана, показывающая Соодіе Зиддезі в действии, показана на рис. 1.4. 
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Рис. 1.4. Копия экрана приложения Соодіе Зиддезі, в котором на момент выхода статьи Гарретта об А)ах 
уже использовались асинхронные ХМІ_-технологии 

В то же время у Соодіе было и другое революционное приложение — Соодіе Марв, позволявшее 
пользователю перемещаться по карте и просматривать нужные ему, локализованные результаты, отображаемые в 
реальном масштабе времени. Уровень скорости и удобства, предоставляемый этим приложением за счет 
использования технологий А)ах, резко отличался от уровня других доступных приложений, работающих с 
картами, в результате чего рынок интерактивных карт был полностью реконструирован. Копия экрана Соодіе 
Марв показана на рис. 1.5. 

Хотя за последние несколько лет язык ІаѵаЗсгірІ не претерпел каких-либо существенных физических 
изменений, его принятие в качестве полноценной среды программирования такими компаниями как Соодіе и 
Уабоо, показало, сколь существенно изменилось его восприятие и популярность. 
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Рис. 1.5. Приложение Соодіе Марз, использующее ряд А]ах-технологий для динамической загрузки 
локализованной информации 

Поддержка со стороны браузеров 

Разработка на ІаѵаЗсгірі связана с одним грустным обстоятельством — привязанностью к браузерам, 
осуществляющим ее реализацию и поддержку, получается, что она отдана на откуп тем браузерам, которые на 
данный момент обладают наибольшей популярностью. Поскольку пользователи не всего используют браузеры, 
обладающие наилучшей поддержкой ІаѵаЗсгірі, мы вынуждены определять, какие свойства считать наиболее 
важными. 

Многие разработчики стали отказываться от поддержки своих программ теми браузерами, которые 
доставляют слишком много проблем при разработке с учетом их особенностей. Существует тонкое соотношение 
между поддержкой браузеров на основе контингента их пользователей, и их поддержкой на основе наличия в них 
требуемых свойств. 

Недавно компания Ѵаііоо выпустила ІаѵаЗсгірі-библиотеку, которую можно использовать для расширения 
своих веб-приложений. Вместе с этой библиотекой был выпущен ряд указаний по приемам конструирования, 
которых должны придерживаться разработчики веб-приложений. На мой взгляд, наиболее важным из 
выпущенных компанией Ѵабоо документов является официальный список браузеров, в которых поддерживается и 
не поддерживается работа библиотеки. Любой человек, и любая корпорация могли бы сделать то же самое, 
опубликовав документ, который трудно переоценить, на одном из своих самых посещаемых веб-сайтов Интернета. 
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В Уаііоо разработана система категорирования браузерной поддержки, присваивающая браузерам 
определенную категорию на основе их возможностей. В ней браузерам присваивается одна из трех категорий: А, 
X и С: 

• Браузеры категории А протестированы на полную поддержку, и приложения Уаііоо могут гарантированно 
работать под их управлением. 

• Браузеры категории X — это те же браузеры категории А, о существовании которых компания Уаііоо знает, 
но еще не имела возможности полностью протестировать их работу, или это новые браузеры, с которыми 
она еще никогда не имела дело. Браузеры категории X получают такое же содержимое, что и браузеры 
категории А, в надежде, что они смогут справиться с этим расширенным содержимым. 

• Браузеры категории С известны как «плохие», не поддерживающие свойства, необходимые для 
полноценной работы приложений Уаііоо. Это такие браузеры, которые обслуживают функциональные 
контенты приложений, в которых не используется ІаѵаЗсгірІ, поскольку приложения Уаііоо абсолютно 
ненавязчивы в этом вопросе (в том смысле, что они продолжают работать и в отсутствие ІаѵаЗсгірі). 

Кстати, совершенно случайно тот выбор категорий, который был сделан компанией Уаііоо, совпал с моим 
собственным, что придало ему особую привлекательность. В этой книге я часто употребляю термин современный 
браузер, используя который я подразумеваю любой браузер, который в таблице браузеров Уаііоо отнесен к 
категории А. Наличие постоянного набора свойств, с которыми можно работать, позволяет сделать процесс 
обучения и разработки намного более интересным и менее тягостным (благодаря игнорированию вопросов 
несовместимости браузеров). 

Я настоятельно рекомендую ознакомиться с документами, относящимися к категорированию браузерной 
поддержки (которые можно найти по адресу ІіЫр://с!еѵеІорег.уаііоо.сот/уиі/агІісІев/дЬз/дЬв.ІіІітІ), включая и 
соответствующую таблицу, изображенную на рис. 1.6, чтобы оценить предпринятую Уаііоо попытку. Открывая 
доступ к этой информации широкому кругу веб-разработчиков, Уаііоо предоставляет неоценимый «золотой 
стандарт», к которому следует стремиться и всем остальным, что само по себе уже трудно переоценить. 

Дополнительную информацию о поддерживаемых браузерах можно найти в приложении В, где подробно 
рассмотрены все недостатки и преимущества каждого браузера. Практически всегда те браузеры, которые 
отнесены к категории А, будут находится на переднем крае разработки, обеспечивая исчерпывающим набором 
свойств, необходимых для ее осуществления. Выбор браузеров, от которых вы хотите добиться поддержки своих 
приложений, в конечном счете обусловливается тем набором свойств, который будет в состоянии поддержать 
ваше приложение. Если вы (к примеру) хотите добиться поддержки ІМеІзсаре ІМаѵідаіог 4 или Іпіегпеі Ехріогег 5, 
это сильно сократит то количество свойств, которые можно будет использовать в вашем приложении, в силу того, 
что эти браузеры ограничены в поддержке современных технологий программирования. 
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Рис. 1.6. Таблица категорирования браузерной поддержки, предоставленная компанией ѴаИоо 

Зная, какие из браузеров можно отнести к современным, вы можете воспользоваться их сильными 
сторонами, и получить надежную базу для дальнейших разработок. Эта база может быть определена наличием 
следующего набора свойств: 

Ядра ІаѵаЗсгірІ 1.5: Самой последней, широко распространенной версии ІаѵаЗсгірІ:, обладающей всеми 
свойствами, необходимыми для полной функциональной поддержки объектно-ориентированного языка Эа ѵа5сгі рТ. 
Іпіегпеі Ехріогег 5.0 не обладает полной поддержкой версии 1.5, что является главной причиной нежелания 
разработчиков заниматься поддержкой этого браузера. 


ХМІ !_ йоситеп1 ОЬ]ес1 Мосіеі (ЭОМ) 2: Стандарта рассмотрения НТМІ_ и ХМЬдокументов. Это абсолютно 
необходимое условие для создания быстро работающих приложений. 


ХМШІірЯециезІ:: Основы А]ах — простого уровня инициирования удаленных НИр-запросов. Этот объект 
поддерживается всеми браузерами по умолчанию, за исключением Іпіегпеі Ехріогег 5.5-6.0; тем не менее оба они 
поддерживают инициирование совместимого объекта, используя АсІіѵеХ. 


С55: Основного компонента, необходимого для разработки веб-страниц. Это требование может показаться 
странным, но наличие С55 жизненно важное требование для разработчиков веб-приложений. Поскольку таблицы 
С55 поддерживаются всеми современными браузерами, это обычно сводится к несоответствиям в представлениях, 
вызывающим наибольшее количество проблем. Это главная причина, по которой Іпіегпеі Ехріогег для Мае 
поддерживается реже всех браузеров. 
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Сочетание всех этих свойств браузера и составляет основу разработки приложений на ^ѵаЗсгірІ:. 
Поскольку ранее перечисленные свойства так или иначе поддерживаются всеми современными браузерами, вы 
получаете твердую платформу для создания всего, что будет встречаться в остальной части этой книги. Все, что 
рассматривается в книге будет основано на предположении, что используемый вами браузер по крайней мере 
поддерживает эти свойства. 

Выводы 

В этой книге делается попытка всецело охватить все современные, профессиональные технологии 
программирования на ^ѵаЗсгірІ, поскольку они используются всеми, от индивидуальных разработчиков до 
больших корпораций, делая их код более удобным, понятным и интерактивным. 

В этой главе мы получили короткий обзор всего, о чем собираемся вести речь в этой книге. Сюда входят 
основы профессионального программирования на ^ѵаЗсгірІ: создание объектно-ориентированного кода, его 
тестирование и создание пакета распространения. Затем вы увидели, в чем заключаются фундаментальные 
аспекты создания ненавязчивых ООМ-сценариев, включая краткий обзор объектной модели документа, событий и 
вопросов взаимодействия между ^ѵаЗсгірІ и С55. И, наконец, вы взглянули на исходные условия, лежащие в 
основе технологии А]'ах и на проблему поддержки ^ѵаЗсгірІ в современные браузерах. Изучение всех этих тем 
более чем достаточное условие освоения уровня профессионального программирования на ^ѵаЗсгірІ. 
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Глава 2 Объектно-ориентированный ЗаѵаЗсгірІ 

Объекты являются основными элементами ІаѵаЗсгірб В сущности все в ІаѵаЗспрІ является объектом, со 
всеми вытекающими из этого преимуществами. Но чтобы заработать репутацию надежного объектно- 
ориентированного языка, ІаѵаЗсгірІ включает широкий арсенал свойств, делающих его весьма оригинальным 
языком, как по возможностям, так и по стилю. 

В этой главе я хочу начать с охвата некоторых наиболее важных аспектов языка ІаѵаЗсгірІ:, среди которых 
ссылки, область видимости, замыкания и контекст, которым слишком мало уделено внимания в других книгах по 
ІаѵаЗсгірб После того, как будет заложен прочный фундамент, мы перейдем к исследованию других важных 
аспектов объектно-ориентированного ІаѵаЗсгірі, куда будут включены тонкости поведения объектов, способы 
создания новых объектов и установка методов со специфическими полномочиями. Если отнестись к ней со всей 
серьезностью, то вполне возможно, что эта глава — самая важная в книге, поскольку она должна полностью 
изменить ваш взгляд на ІаѵаЗсгірІ, как на язык программирования. 

Свойства языка 

В языке ІаѵаЗспрІ имеется ряд свойств, составляющих основу его самобытности. Подобными свойствами 
обладают очень немногие другие языки. Лично я считаю, что сочетание свойств и придает языку ту самую 
скрытую мощь. 

Ссылки 

Основным аспектом ІаѵаЗсгірІ является понятие ссылок. Ссылка — это указатель на фактическое 
местонахождение объекта. Это невероятно мощное свойство, в отношении которого действует предположение, что 
физический объект никогда не может быть ссылкой. Строка — это всегда строка, а массив — всегда массив. Но на 
один и тот же объект могут ссылаться многие переменные. Именно на такой системе ссылок построен ІаѵаЗсгірб 
Поддерживая наборы ссылок на другие объекты, язык предоставляет вам гораздо больше гибкости. 

Вдобавок к этому объект может содержать набор свойств, целиком состоящий из простых ссылок на другие 
объекты (такие как строки, числа, массивы и т.д.). Когда несколько переменных указывают на один и тот же 
объект, модификация исходного типа этого объекта отразится на всех переменных. Соответствующий пример 
показан в листинге 2.1, где две переменные указывают на один и тот же объект, а модификация содержимого 
объекта имеет глобальный эффект. 

Листинг 2.1. Пример нескольких переменных, ссылающихся на один и тот же объект 

// Установка оЬ^ на пустой объект 
ѵаг оЬ^ = пем ОЬ^есбО; 

// теперь об^Пеб является ссылкой на другой объект 
ѵаг об^Пеб = оЬ^ ; 

// Модификация свойства исходного объекта 
оЪ^. опеРгорегбу = бгие; 

// Теперь мы видим, что это изменение представлено в обеих переменных 
// (Поскольку обе они ссылаются на один и тот же объект) 
аіегб ( оЬ^. опеРгорегбу === оЪ^Пеб. опеРгорегбу ); 

Прежде я уже упоминал, что самомодифицирующиеся объекты составляют для ІаѵаЗсгірі большую 
редкость. Рассмотрим один довольно известный случай, когда это все-таки происходит. Объект массива способен 



23 


самостоятельно дополняться элементами, используя метод ризІт(). Поскольку в ядре объекта Аггау значения 
сохранены как свойства объекта, в результате возникает ситуация, подобная той, что показана в листинге 2.1, где 
объект становится глобально модифицированным (приводящая к одновременным изменениям в содержимом 
множества переменных). При мер подобной ситуации приведен в листинге 2.2. 

Листинг 2.2. Пример самомодифицирующегося объекта 

// Создание массива элементов 

ѵаг ібетз = пем Аггау( "опе", "био", "ббгее" ); 

// Создание ссылки на массив элементов 
ѵаг ібетзКеі: = ібетз; 

// Добавление элемента к исходному массиву 
ібетз. ризб( "боиг" ); 

// Длина обоих массивов должна быть одинаковой, 

// поскольку оба они указывают на один и то же объект массива 
аіегб ( ібетз . ІепдбЪ. == ібетзКеб. ІепдбЪ. ); 

Важно запомнить, что ссылки всего лишь указывают на конечный объект, на который они ссылаются, и не 
являются ссылками друг на друга. К примеру, в РегІ есть возможность иметь ссылку, указывающую на другую 
переменную, которая также является ссылкой. Но в ІаѵаБсгірІ ссылка опускается по цепочке ссылок, и указывает 
только на основной объект. Эта ситуация проиллюстрирована в листинге 2.3, где физический объект претерпевает 
изменения, но ссылка продолжает указывать на старый объект. 

Листинг 2.3. Изменение ссылки на объект СЪапдіпд Иге Реіегепсе оіап ОІфесі ѴѴМІе Маіпіаіпіпд Іпіедгііу 

// Установка ібетз на массив строковых значений (объект) 
ѵаг ібешз = пем Аггау( "опе", "био", "бЬгее" ); 

// Установка ібешзКеб в качестве ссылки на ібешз 
ѵаг ібешзКеб = ібешз; 

// Установка ібешз на новый объект 
ібешз = пей Аггау( "пей", "аггау" ); 

// Теперь ібешз и ібешзКеД указывают на разные объекты. 

// ібешз указывает на пей Аггау( "пей", "аггау" ) 

// ібешзКеб указывает на пей Аггау( "опе", "био", "ббгее" ) 
аіегб( ібешз !== ібешзКеб ); 

И, наконец, взглянем на удивительный случай, возникающий при самомодификации объекта, но 
приводящий к возникновению нового объекта, ссылки на который отсутствуют. При объединении строк всегда 
образуется новый объект строки, а не модифицированная версия исходной строки. Этот случай показан в 
листинге 2.4. 

Листинг 2.4. Пример модификации объекта, в результате которой возникает не самомодифицированный, а 
новый объект 


// Установка ібеш на новый строковый объект 
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ѵаг ібет = "безб"; 

// Теперь ібетКеб ссылается на тот же самый строковый объект 
ѵаг ібешКеТ = ібеш; 

// Объединение строкового объекта в новым текстом 
// Учтите, что при этом создается новый объект, 

// а не модифицируется исходный, 
ібеш += "іпд"; 

// Значения ібеш и ібетПеб не равны друг другу, поскольку 
// был создан абсолютно новый строковый объект 
аіегб ( ібеш != ібетКеб ); 

Если вы плохо знакомы со ссылками, то в них не сложно и запутаться. Но понимание порядка их 
работы является основой для создания высококачественного и свободного от ошибок кода ]аѵа5сгір1;. В 
нескольких следующих разделах мы рассмотрим ряд свойств, которые может быть и не отличаются новизной или 
особой привлекательностью, но играют важную роль в написании безупречного программного кода. 

Перегрузка функций и проверка типов 

Распространенным свойством других объектно-ориентированных языков, к которым относиться и язык 
^ѵа, является возможность «перегрузки» функций, изменяющей ее поведение в зависимости от количества или 
типов переданных им аргументов. Хотя напрямую это свойство в ^ѵаЗсгірІ: не доступно, ряд имеющихся в нем 
инструментов предоставляет точно такую же возможность. 

Для перегрузки функций требуются две вещи: возможность определения количества предоставленных 
аргументов, и возможность определения типа аргументов. Начнем с количества предоставленных аргументов. 

Внутри каждой функции ^ѵаЗсгірІ существует контекстно-зависимая переменная под названием 
агдитепіз, которая ведет себя как псевдомассив, содержащий все переданные функции аргументы. Переменная 
Агдитепіз не является настоящим массивом (т.е. вы не можете вносить в нее изменения или вызывать метод 
.ри5И( ) для добавления новых элементов), но можете обращаться к элементам массива и использовать свойство 
.ІепдІІі. Это подтверждается двумя примерами, показанными в листинге 2.5. 

Листинг 2.5. Два примера перегрузки функции в ^ѵаЗсгірі 

// Простая функция отправки сообщения 
бипсбіоп зепсІМеззаде ( шзд, оЬ) ) { 

// если предоставлен и текст сообщения и объект 
іб ( агдишепбз. ІепдбЬ. == 2 ) 

// Отправить сообщение объекту 
оЬд . ЬапсіІеМзд ( шзд ); 

//В противном случае предположить, что предоставлен только текст 

// сообщения 

еізе 

// Поэтому ограничиться выводом задаваемого по умолчанию сообщения 
// об ошибке 
аіегб ( шзд ); 
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} 

// Вызов функции с одним аргументом приводит к отображения сообщения 
// с использованием метода аіегб 
зепсІМеззаде ( "Неііо, Могісі!" ); 

// Также функции можно передать свой собственный объект, который 
// осуществляет другой способ отображения информации 

зепсІМеззаде ( "Ном аге уои?", { 

ПапсІІеМзд: бипсбіоп( шзд ) { 

аіегб( "ТЬіз із а сизбот шеззаде: " + шзд ); 

} 

}) ; 

// Функция, принимающая любое количество аргументов и составляющая из них 
// массив 

бипсбіоп шакеАггауО { 

// Временный массив 
ѵаг агг = []; 

// Перебор всех переданных аргументов 
бог ( ѵаг і = 0; і < агдшпепбз.ІепдбП; і++ ) { 

агг.ризіі( агдишепбз[і] ); 

} 

// Возвращение получившегося массива 
гебигп агг; 

} 


Существует также и другой метод определения количества аргументов, переданных функции. Но он имеет 
несколько более изощренную природу использования. В нем применяется тот факт, что любой, не переданный 
аргумент имеет значение неопределенного типа — ипсІеГтесІ. В листинге 2.6 показана простая функция, 
предназначенная для отображения сообщения об ошибке, и предоставляющая сообщение по умолчанию, если 
никакое сообщение ей не передано. 

Листинг 2.6. Отображение сообщения об ошибке и сообщения по умолчанию 

бипсбіоп бізрІауЕггог ( шзд ) { 

// Проверка на то, что значение шзд не определено (ипбебіпесі) 
іб ( буреоб шзд == ' ипбебіпесі ' ) { 

// Если оно не определено, установить значение по умолчанию 
шзд = "Произошла ошибка."; 

} 

// Отображение сообщения 
аіегб ( шзд ); 

} 
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Использование оператора іуреоі 7 помогает нам перейти к теме проверки типов. Поскольку ІаѵаЗсгірІ на 
данный момент является языком с динамическим определением типов, то эта тема может оказаться очень 
полезной и интересной. Существует несколько различных способов проверки типа переменной, но мы собираемся 
рассмотреть два самых полезных. 

Первый способ проверки типа объекта заключается в использовании интуитивно понятного оператора 
Іуреоі. Этот оператор дает нам строковое имя, представляющее тип содержимого переменной. Применение этого 
способа было бы великолепным решением, за исключением того, что для переменных типа оЬ]есі или аггау, или 
пользовательского объекта, к примеру, и5ег, этот оператор возвращает строку оіцесі, не позволяя понять, в чем 
состоит разница между всеми этими объектами. Пример применения этого способа показан в листинге 2.7. 

Листинг 2.7. Пример использования Туреоідля определения типа объекта 

// Проверка, не является ли наше число на самом деле строкой 
іб ( буреоТ пит == "збгіпд" ) 

// Если является, выделение из нее численной составляющей 
пит = рагзеіпб ( пит ); 

// Проверка, не является ли наш массив на самом деле строкой 
іб ( буреоТ агг == "збгіпд" ) 

// Если так оно и есть, создание массива,за счет разбиения строки 
// по элементам, разделенным запятыми 
агг = агг. зрііб (","); 

Второй способ проверки типа объекта заключается в использовании ссылки на свойство, присущее всем 
объектам ІаѵаЗсгірІ:, которое называется сопвігисіог. Это свойство является ссылкой на функцию, используемую 
для первоначального создания этого объекта. Пример использования этого способа показан в листинге 2.8. 

Листинг 2.8. Пример использования свойства сопзігисіог для определения типа объекта 

// Проверка, не является ли наше число на самом деле строкой 
іб ( пит.сопзбгисСог == Збгіпд ) 

// Если является, выделение из нее численной составляющей 
пит = рагзеіпб ( пит ) ; 

// Проверка, не является ли наша строка на самом деле массивом 
ІТ ( збг.сопзбгисСог == Аггау ) 

// Если так оно и есть, создание строки за счет объединения элементов 
// массива через запятые 
збг = збг . оіп ( ' , ' ) ; 

В таблице 2.1 показаны результаты проверки типа различных объектов с использованием двух, 
рассмотренных нами методов. В первом столбце таблицы показан объект, тип которого мы пытаемся определить. 
Во втором столбце показан результат работы оператора іуреоі Переменная (где Переменная — это значение, 
содержащееся в первом столбце). Все результаты, представленные в этом столбце являются строками. И, наконец, 
в третьем столбце показан результат работы Переменная. сопзігисіог по отношению к объектам, содержащимся в 
первом столбце. Все результаты, представленные в этом столбце, являются объектами. 

Таблица 2.1. Проверка типов переменных 


Переменная 


Тип переменной 


Конструктор переменной 
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{ ап: “оЬ]ес1” } 

оіу'есі 

ОЬ]ес1 

[ “ап”, “аггау” ] 

оЪіесІ 

Аггау 

йтс1іоп() {} 

Гипсііоп 

Рипсііоп 

“а $1гіп§” 

8ІГІП§ 

8ігіп§ 

55 

питЬег 

ЫитЬсг 

Ігис 

Ьооіеап 

Вооіеап 

пе\ѵ ЬФег() 

оіу'есі 

ІІзег 


Теперь, воспользовавшись информацией из таблицы 2.1, вы можете создать универсальную функцию для 
проведения внутри нее проверки типа. Теперь уже, наверное, очевидно, что использование конструктора 
переменной в качестве ссылки на тип объекта — это наиболее надежный и безошибочный способ проверки типов. 
Строгая проверка типов может помочь в тех случаях, когда вам нужно убедиться, что вашим функциям передано 
абсолютно точное количество аргументов абсолютно правильного типа. Практический пример такой проверки 
показан в листинге 2.9. 

Листинг 2.9. Функция, которую можно использовать для строгого утверждения всех аргументов, 
переданных функции 

// Строгая проверка списка типов переменных по списку аргументов 
бипсбіоп збгісб ( бурез, агдз ) { 

// Проверка совпадения количества типов и аргументов 
іб ( бурез . ІепдбЬ != агдз . ІепдбЬ ) { 

// Если количество не совпадает, выдача полезного исключения 
бЬговд "Неверное число аргументов. Ожидалось " + бурез. ІепдбЬ. + 

", а вместо этого получено " + агдз. ІепдбЬ. + 

} 

// Перебор всех аргументов и проверка их типов 
бог ( ѵаг і = 0; і < агдз. ІепдбЬ; і++ ) { 

// 

іб ( агдз[і].сопзбгисбог != бурез[і] ) { 

бЬгом "Неверный тип аргумента. Ожидался" + бурез[і]. паше + 

", а получен " + агдз[і].сопзбгисбог. паше + 

} 

} 

} 

// Простая функция, предназначенная для распечатки списка пользователей 
бипсбіоп изегЬізб( ргебіх, пит, изегз ) { 

// Проверка, что ргебіх — строка, пит — число, 

// а изегз — массив 

збгісб( [ Збгіпд, ЛитЬег, Аггау ], агдитепбз ); 

// Выполнение итерации до 'пит' пользователей 
бог ( ѵаг і = 0; і < пит; і++ ) { 






















28 


// Отображение сообщения о каждом пользователе 
ргіпб ( ргебіх + ": " + изегз[і] ); 

} 

} 


Проверка типа переменных и проверка длины массива аргументов по сути являются весьма простыми 
понятиями, но могут использоваться для обеспечения сложных методов, которые могут быть к ним 
приспособлены, и создавать о вашем коде наилучшие впечатления у разработчиков и пользователей. Далее мы 
собираемся рассмотреть область видимости, существующую в ІаѵаЗсгірІ:, и как ею лучше всего управлять. 

Область видимости переменных 

В ІаѵаБсгірІ область видимости имеет свои особенности. Те или иные формы проявления области 
видимости присутствуют во всех объектно-ориентированных языках программирования; а какие именно — 
зависит от того, в каком контексте сохраняется эта область. В ІаѵаБсгірІ область видимости сохраняется внутри 
функций, а не блоков (образуемых такими операторами, как ѵѵбііе, ІГ и Тог). В итоге может получиться код, 
имеющий, казалось бы, несколько странный результат работы (если вы ранее работали с языками, имеющими 
поблочные области видимости). В листинге 2.10 показан пример результата работы кода с областью видимости, 
проявляемой внутри функции. 

Листинг 2.10. Пример работы области видимости переменных в ІаѵаЗсгірі 

// Установка значения 'безб' для глобальной переменной боо 
ѵаг боо = "безб"; 

// Внутри блока іб 
іб ( бгие ) { 

// Присвоение боо значения 'пем безб' 

// ПРИМЕЧАНИЕ: все это внутри глобальной области видимости! 
ѵаг боо = "пем безб"; 

} 

// Здесь мы видим, что боо теперь равна ' пем безб' 
аіегб ( боо == "пем безб" ); 

// Создание функции, изменяющей значение переменной боо 
бипсбіоп СезбО { 

ѵаг боо = "оіб безб"; 

} 

// Тем не менее, когда осуществляется ее вызов, воздействие на 'боо' 

// проявляется только в области видимости внутри функции 
безб () ; 

// что подтверждается тем, что значение боо по-прежнему равно 'пей безб' 
аіегб ( боо == "пем безб" ); 

Обратите внимание на то, что в листинге 2.10 переменные находятся внутри глобальной области 
видимости. Интересной особенностью встроенных в браузеры версий ІаѵаЗсгірІ; является то, что переменные, 
имеющие глобальную область видимости, фактически являются лишь свойствами объекта ѵѵіпсіоѵѵ. Хотя в 
некоторых устаревших версиях Орега и ЗаГагі этого не происходит, все-таки лучше придерживаться того, что 
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браузер именно так себя и ведет. В листинге 2.11 показан пример такого проявления глобальной области 
видимости. 

Листинг 2.11. Пример глобальной области видимости в ІаѵаЗсгірі и в объекте ѴѴіпсіоѵѵ 

// Глобальная переменная, в которой содержится строка 'безб' 
ѵаг безб = "безб"; 

// Обратите внимание на то, что наша 'глобальная' переменная и свойство безб 
/ / объекта мбпбоад идентичны друг другу 
аіегб ( иіпсіом . безб == безб ); 

И, наконец, посмотрим, что произойдет когда объявление переменной не определено. В листинге 2.12 
значение переменной Гоо присвоено в области видимости внутри функции 1е5і( ). Тем не менее, в этом листинге 
фактически нигде не объявлена область видимости этой переменной (не использовано объявление ѵаг іоо). Когда 
переменная іоо не объявлена явным образом, она становиться глобальной, даже если она используется только в 
области видимости внутри функции. 

Листинг 2.12. Пример скрытого объявления глобальной переменной 

// Функция, внутри которой устанавливается значение переменной боо 
бипсбіоп безе () { 

боо = "безб"; 

} 

// Вызов функции для установки значения боо 
безб () ; 

// Мы видим, что теперь боо имеет глобальную область видимости 
аіегб ( ил-пбом. боо == "безб" ); 

Хотя в ІаѵаЗсгірі механизм области видимости и не такой строгий, как у языков, где он имеет блочный 
характер, теперь уже не остается сомнений в том, что он все же обладает достаточной мощностью и 
выразительностью. А когда это еще и сочетается с понятием замкнутых выражений, которое будет рассмотрено в 
следующем разделе, ІаѵаЗсгірі проявляет себя очень мощным языком сценариев. 

Замкнутые выражения 

Замкнутые выражения — это средства, через которые внутренние функции могут сослаться на 
переменные, представленные в их внешних функциях, в которые они были включены, после того, как их 
родительские функции уже завершили свою работу. Именно эта тема может сильно повлиять на ваши 
представления и может стать слишком сложной для восприятия. Я настоятельно рекомендую обратиться к веб¬ 
сайту, упомянутому в конце этого раздела, поскольку на нем выложена превосходная информация по теме 
замкнутых выражений. 

Начнем с рассмотрения двух простых примеров замкнутых выражений, показанных в листинге 2.13. 

Листинг 2.13. Два примера, показывающие, как замкнутые выражения могут сделать ваш код более 
понятным 

// Поиск элемента, ІБ которого равен 'таіп' 
ѵаг ок^ = босишепб. дебЕІешепбВуІб ( "таіп" ); 
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// Изменение стиля его обрамления 
оЬ^ . збуіе .Ъогбег = "Ірх зоіісі геб"; 

// Инициализация обратного вызова, который должен произойти через одну 
// секунду 

зебТішеоиб ( бипсбіоп (){ 

// и сделать объект невидимым 
оЪ^. збуіе . бізріау = 'попе'; 

}, 1000 ); 

// Типичная функция для отображения задержанного сообщения 
Типсбіоп беІауебАІегб ( шзд, біше ) { 

// Инициализация вложенного обратного вызова 
зебТішеоиб ( Типсбіоп (){ 

// в котором используется сообщение, переданное из включающей его 
// функции 
аіегб ( шзд ); 

}, біше ); 

} 

// Вызов функции беІауебАІегб с двумя аргументами 
беІауебАІегб ( "Добро пожаловать!", 2000 ); 

Первый вызов функции зеіТітеои! демонстрирует распространенный случай, когда у неопытных 
разработчиков на ^ѵаЗсгірі возникают проблемы. Зачастую в их программах можно увидеть примерно следующий 
код: 

зебТішеоиб ( "обЬегЕипсбіоп ()", 1000); 

// или даже 

зебТішеоиб ( "обЬегРипсбіоп (" + пит + + пит2 + ")", 1000); 

Используя понятие замкнутых выражений, можно вполне обойтись и без этой мешанины программного 
кода. В первом примере все очень просто. В нем имеется обратный вызов, выполняемый через 1000 миллисекунд 
после первого вызова, в котором есть ссылка на переменную оЬі (которая определена как глобальная 
переменная, содержащая ссылку на элемент с Ю равным таіп). Вторая, определенная в примере функция, 
беІауебАІегІ:, показывает решение по выводу сообщения с помощью зеІТІтеоиІ, а также возможность иметь 
замкнутые выражения в пределах областей видимости функций. 

Вы можете убедиться, что использование простых замкнутых выражений, подобных тому, которое 
применено в нашем коде, делает содержание программы более понятным, не давая ему превращаться в 
синтаксический винегрет. 

Рассмотрим один интересный побочный эффект, который можно получить при использовании замкнутых 
выражений. В некоторых функциональных языках программирования существует понятие карринга (сиггуіпд). По 
своей сути, карринг — это способ предварительного наполнения функции некоторым количеством аргументов, 
путем создания новой, более простой функции. В листинге 2.14 приведен простой пример карринга, создающего 
новую функцию, преднаполняемую аргументом другой функции. 


Листинг 2.14. Пример осуществления карринга функции с использованием замкнутых выражений 
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// Функция, генерирующая новую функцию сложения чисел 
бипсбіоп абсКЗепегабог ( пит ) { 

// Возврат простой функции, выполняющей сложение двух чисел, где первое 
// число позаимствовано у генератора 
гебигп іипсііоп ( боАсЫ ) { 

геРигп пит + боАсМ 

} ; 

} 

// Теперь асісіігіѵе содержит функцию, которая берет один аргумент прибавляет к 
// нему число пять, и возвращает полученный результат 
ѵаг асісіігіѵе = асЫСепегабог ( 5 ) ; 

// Здесь мы можем убедиться, что результат работы функции асісіігіѵе равен 9, 

// когда ей в качестве аргумента передается число 4 
аіегр ( асІсІЕіѵе ( 4 ) == 9 ) ; 

При программировании на ІаѵаЗспрІ возникает еще одна, довольно распространенная проблема, которую 
можно решить с помощью замкнутых выражений. Дело в том, что неопытные разработчики имеют привычку 
случайно оставлять в глобальной области видимости большое количество абсолютно ненужных переменных. Эта 
практика всегда считалась порочной, поскольку эти лишние переменные могут создавать скрытую помеху работе 
каких-нибудь библиотек, вызывая возникновение запутанных проблем. В листинге 2.15 показано, как используя 
самовыполняемые, безымянные функции, вы можете фактически скрыть от всего остального кода все 
переменные, которые обычно получают глобальную область видимости. 

Листинг 2.15. Пример использования безымянных функций для скрытия переменных от глобального 
обозрения 

// Создание новой безымянной функции, используемой в качестве оболочки 
( бипсбіоп (){ 

// Переменная, обычно имеющая глобальную область видимости 
ѵаг тзд = "Спасибо за визит!"; 

// Привязка к глобальному объекту новой функции, 
иіпсіом . опипіоасі = бипсбіоп () { 

// которая использует 'скрытую' переменную 
аіегб ( тзд ); 

} ; 


// Закрытие безымянной функции и ее выполнение 

}) () ; 


В заключение рассмотрим одну проблему, связанную с использованием замкнутых выражений. Вспомним, 
что замкнутые выражения дают возможность ссылаться на переменные, которые существуют внутри родительской 
функции. Но они не предоставляют значений этих переменных, присвоенных им в момент создания, а дают самые 
последние значения этих переменных, которые были получены ими в родительских функциях. Наиболее часто эта 
проблема проявляется при работе цикла. Представим, что есть переменная, используемая в качестве итератора 
(например, і). Внутри цикла Гог создается новая функция, использующая замкнутое выражение, для ссылки на 
итератор. Проблема в том, что к тому времени, когда будет происходить вызов новых замкнутых функций, они 
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будут ссылаться на последнее значение итератора (например, на последнюю позицию массива), а не на то 
значение, которое, возможно, вами ожидалось. В листинге 2.16 показан пример использования безымянных 
функций, порождающих область видимости для создания экземпляра, в котором можно использовать ожидаемое 
замкнутое выражение. 

Листинг 2.16. Пример использования безымянной функции для порождения области видимости, 
необходимой для создания множества функций, использующих замкнутые выражения 

// Элемент, у которого значение Ю равно таіп 
ѵаг оЪ) = боситепб . дебЕІетепбВуІсІ ( "таіп" ) ; 

// Массив элементов для привязки 
ѵаг ібетз = [ "сііск", "кеургезз" ]; 

// Итерация по всем элементам 

бог ( ѵаг і = 0; і < ібетз.ІепдбП; і++ ) { 

// Создание самовыполняемой безымянной функции для порождения области 
// видимости 
(бипсбіоп(){ 

// Запоминание значения внутри этой области видимости 
ѵаг ібет = ібетз[і]; 

// Привязка функции к элементу 
оЬ) [ "оп" + ібет ] = бипсбіоп () { 

// элемент обращается к родительской переменной, которая была 
// успешно увидена в содержимом этого цикла бог 
аіегб ( "Спасибо за ваш " + ібеш ); 

} ; 

}) () ; 

} 


Понятие замкнутых выражений не так-то легко усвоить; мне понадобилось потратить массу времени и 
усилий, что бы по-настоящему осознать ту мощность, которая в них заключена. Хорошо, что нашелся 
замечательный источник, в котором объясняется работа замкнутых выражений в ІаѵаБсгірІ — статья Джима Джея 
(Лт Іеу) «ОаѵаБсгірі СІозигеБ» опубликованная по адресу ИПрѴ^ІЬЬеппд.сот/Іад/Іад^оІез/сІозигез.ІіІтІ. 

В заключение, мы рассмотрим понятие контекста, которое является той самой строительной конструкцией, 
вокруг которой выстраивается вся объектно-ориентированная функциональность ІаѵаБсгірІ:. 

Контекст 

У вашего кода в ІаѵаБсгірІ; всегда будет какая-то разновидность контекста (объект, внутри которого он 
работает). Это свойственно и другим объектно-ориентированным языкам, но без тех экстремальных 
обстоятельств, которые встречаются в ІаѵаЗсгірі. 

Контекст проявляется посредством переменной 1Ыз. Эта переменная всегда будет ссылаться на объект, 
внутри которого код в данный момент работает. Следует помнить, что глобальные объекты фактически являются 
свойствами объекта ѵѵіпбоѵѵ. Это означает, что даже в глобальном контексте переменная Дііз будет ссылаться на 
объект. Контекст может быть довольно мощным инструментом, одним из самых важных для объектно- 
ориентированного кода. В листинге 2.17 показаны несколько простых примеров контекста. 
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Листинг 2.17. Пример использования функций в пределах контекста с последующим переключением их 
контекста на другую переменную 

ѵаг окд = { 

уез: Іипсбіоп (){ 

// ІЬіз == оЬ^ 

■Цтіз.ѵаі = бгие; 

}, 

по: Іипсбіоп () { 

Йііз.ѵаі = Іаізе; 

} 

} ; 


// Мы видим, что свойство в объекте 'оЬу' отсутствует 
аіегб( ок^ .ѵаі == пиіі ); 

// Мы запускаем функцию уез и она вносить изменения в свойство ѵаі, 

// связанное с объектом 'оЬ^' 
ок^ .уез () ; 

аіегб ( ок^ .ѵаі == бгие ); 

// А теперь указываем міпсіом.по на метод ок^.по, и запускаем его 
міпсіом.по = ок^.по; 
міпсіои. по () ; 

// Это приводит к тому, что объект ок^ остается неизменным (поскольку 
// контекст был переключен на объект иіпсіои) 
аіегб ( ок^ .ѵаі == бгие ); 

// а свойство ѵаі объекта міпбом стало обновленным, 
аіегб ( міпсіом.ѵаі == Іаізе ); 

Возможно, вы обратили внимание, на то, какой неуклюжий код был использован в листинге 2.17 для 
переключения контекста метода оЬрпо на переменную ѵѵіпсіоѵѵ. К счастью, в ІаѵаЗсгірІ есть несколько методов, 
упрощающих понимание и реализацию этого процесса. В листинге 2.18 показаны два разных метода, саІІ и арріу, 
способные справиться с этой задачей. 

Листинг 2.18. Примеры изменения контекста функций 

// Простая функция, устанавливающая цветовой стиль своего контекста 
Іипсбіоп сПапдеСоІог ( соіог ) { 

Шз . збуіе . соіог = соіог; 

} 

//Ее вызов для объекта міпсіовд, заканчивающийся неудачей, поскольку в нем 
// нет объекта збуіе 
сПапдеСоІог ( "»Ыке" ); 

// Поиск элемента, ІБ которого равен шаіп 
ѵаг шаіп = босишепб . дебЕІешепбВуІсі ( "шаіп") ; 
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// Установка для него черного цвета, используя метод саіі 

// Этот метод устанавливает контекст по первому аргументу, и передает все 
// остальные аргументы в качестве аргументов функции 
сЬапдеСоІог . саіі ( таіп, "Ыаск" ); 

// Функция, устанавливающая цвет элемента Ьосіу 
ЬипсЬіоп зеЬВосІуСоІог () { 

// Метод арріу устанавливает контекст на элемент Ьосіу, указанный в 
// качестве первого аргумента, второй аргумент представляет собой массив 
// аргументов, передаваемых функции 
сЬапдеСоІог . арріу ( ЬосшпепЬ . Ьосіу, агдишепЬз ); 

} 

// Установка для элемента Ьосіу черного цвета 
зеЬВосіуСоІог ( "Ыаск" ) ; 

Возможно, польза от применения контекста не покажется сразу же столь очевидной, но она несомненно 
проявится в следующем разделе, где мы рассмотрим объектно-ориентированные свойства ІаѵаЗсгірі. 

Объектно-ориентированные основы Заѵабсгірі 

Фраза «объектно-ориентированный ІаѵаЗсгірІ;» страдает явной избыточностью, поскольку язык ІаѵаЗсгірі 
является полностью объектно-ориентированным, и использовать его как-то по-другому просто невозможно. Тем не 
менее, недостаток многих неопытных программистов (включая и работающих на ІаѵаЗсгірі) проявляется в том, что 
они пишут свой код с функциональным подходом, не используя контекст или группировку. Чтобы обрести 
исчерпывающее понятие о том, как пишется оптимальный код ІаѵаЗсгірІ;, нужно понять, как работают объекты 
ІаѵаЗсгірі, в чем состоят их отличия от объектов в других языках программирования, и как этими отличиями 
можно воспользоваться. 

В остальной части этой главы мы изучим основы написания объектно-ориентированного кода в ІаѵаЗсгірі, 
а затем, в следующих главах пройдем практикум создания такого кода. 

Объекты 

Объекты являются основой ІаѵаЗсгірІ;. Фактически все внутри языка является объектом. Основная 
составляющая мощности языка базируется именно на этом факте. На своем самом базовом уровне объекты 
существуют как семейства свойств, чем-то напоминая хэш-конструкции, которые можно увидеть в других языках. 
В листинге 2.19 показаны два основных примера создания объекта с набором свойств. 

Листинг 2.19. Два примера создания простого объекта и установки его свойств 

// создание нового ОЬ^есЬ-объекта и сохранение его в 'оЬ^' 
ѵаг о^ = пем О^есЬО; 

// Присвоение некоторым свойствам объекта различных значений 
оЬ^. ѵаі = 5; 
о^.сііск = Ьипскіоп () { 
аіегк ( "Ьеііо" ) ; 

}; 
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// Эквивалентный код, использующий для определения свойств 
// сокращенную запись и пар ключ-значение 

ѵаг оЬ^ = { 

// Установка имен свойств и значений с использованием пар 
// ключ-значение 
ѵаі : 5, 

сііск: бипсбіоп () { 
аіегб ( "Ьеііо" ); 

} 


} ; 


В действительности для объектов ничего кроме этого и не нужно. Но при создании новых объектов, 
особенно тех, которые наследуют свойства других объектов все уже не так просто. 

Создание объектов 

В отличие от многих других объектно-ориентированных языков, понятие классов в ]аѵа5сгір1; фактически 
отсутствует. Большинство других объектно-ориентированных языков дает возможность реализовать экземпляр 
конкретного класса, но к ^ѵаБсгірІ: это не относится. В ]аѵа5сгір1; объекты могут создавать другие объекты, и 
объекты могут быть унаследованы от других объектов. В общем смысле это понятие называется наследованием 
прототипов и будет рассмотрено чуть позже в разделе «Публичные методы». 

И все-таки в ^ѵаБсгірІ: должен быть способ создания нового объекта, независимо от того какая объектная 
схема в нем используется. ^ѵаБсгірІ: делает так, что любая функция может быть также создана в качестве 
экземпляра объекта. Это звучит несколько запутаннее, чем есть на самом деле. Все очень похоже на разделку 
куска теста (заготовки объекта) при помощи формы для печенья (в качестве которой выступает конструктор 
объекта, использующий его прототип). 

Пример того, как это все работает, показан в листинге 2.20. 

Листинг 2.20. Создание и использование простого объекта 

// Простая функция, принимающая имя и сохраняющая 
// его в текущем контексте 
бипсбіоп Цзег ( паше ) { 

бЫз.пате = пате; 

} 

// Создание нового экземпляра этой функции с указанием имени 
ѵаг ше = певд Цзег( "Му Лате" ); 

// Мы можем убедиться в том, ее имя было установлено в качестве ее 
// собственного свойства 
аіегб ( те.паше == "Му Лате" ); 

//И что это экземпляр объекта Цзег 
аіегб ( те.сопзбгисбог == Цзег ); 


// Теперь, поскольку ІІзег() по-прежнему является функцией, что будет, если 
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// мы воспользуемся ею именно в этом качестве? 
бзег ( "Тезб" ) ; 

// Поскольку ее ЧЫз' контекст не был установлен, он по умолчанию 
// устанавливается на глобальный объект ' иіпсіом ', значит, свойство 
// иіпсіом . паше равно переданному имени 
аіегб ( иіпсіом . паше == "Тезб" ); 

Листинг 2.20 показывает работу свойства сопзігисіог. Это свойство существует в каждом объекте, и всегда 
будет указывать в обратном направлении, на функцию, создавшую этот объект. Благодаря ему можно довольно 
эффективно получать дубликат объекта, создавая новый объект того же базового типа, но не с теми же 
свойствами. Пример этому показан в листинге 2.21. 

Листинг 2.21. Пример использования свойства сопзігисіог 

// Создание нового, простого объекта бзег 
бипсбіоп бзег() {} 

// Создание нового объекта бзег 
ѵаг те = пей бзег(); 

// Также создание нового объекта бзег (из конструктора, ссылающегося на 

// первый объект) 

ѵаг уои = пем те.сопзбгисбог() ; 

// Мы можем увидеть, что свойства сопзбгисбог фактически одинаковы 
аіегб ( те.сопзбгисбог == уои.сопзбгисбог ); 

Теперь, зная, как создаются простые объекты, настало время их дополнить компонентами, придающими им 
реальную пользу: контекстными методами и свойствами. 

Публичные методы 

Публичные (РиЫіс) методы полностью доступны конечному пользователю в пределах контекста объекта. 
Чтобы успешно пользоваться этими публичными методами, доступными каждому экземпляру конкретного объекта, 
нужно узнать о свойстве под названием ргоіоіуре (прототип), в котором просто содержится объект, действующий 
в качестве основной ссылки для всех новых копий его родительского объекта. Фактически любое свойство 
прототипа будет доступно в любом экземпляре объекта. Этот процесс создания и ссылки предоставляет нам 
легкую версию наследования, обсуждаемую в главе 3. 

Поскольку прототип объекта тоже является объектом, вы можете присоединять к нему новые свойства, как 
ко всякому другому объекту. Присоединение к прототипу новых свойств сделает их частью каждого объекта 
созданного в качестве экземпляра прототипа, придавая всем этим свойствам публичность (и всеобщую 
доступность). Соответствующий пример показан в листинге 2.22. 

Листинг 2.22. Пример объекта с методами, присоединенными через объект ргоіоіуре 

// Создание нового конструктора бзег 
бипсбіоп бзег( пате, аде ){ 

ГЬіз.пате = пате; 
бЫз.аде = 


аде; 
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} 

// Добавление к объекту ргобоЬуре новой функции 
бзег .ргоЬобуре.деЬЛаше = ЬипсЬіоп (){ 
гебигп Ытіз.пате; 

} ; 


// Добавление еще одной функции к ргоЬобуре 

// Обратите внимание, что ее контекстом будут и объекты, созданные в 
// качестве экземпляра прототипа 
бзег .ргоЬобуре.деЬАде = ЬипсЬіоп (){ 
гебигп ЬЬіз.аде; 

} ; 


// Создание экземпляра нового объекта бзег 
ѵаг изег = пем бзег( "ВоЬ", 44 ); 

// Мы можем убедиться в том, что те два метода, которые мы присоединили 
// вместе с объектом, действуют в пределах надлежащего контекста 
аіегб ( изег.деЬЛаше() == "ВоЬ" ); 
аіегб ( изег.деЬАде() == 44 ); 

При создании новых приложений простые конструкторы и простая обработка прототипа объекта входят в 
арсенал многих разработчиков кода ]аѵа5сгірД В остальной части этого раздела я собираюсь объяснить суть ряда 
других технологических приемов, которыми вы можете воспользоваться для извлечения из объектно- 
ориентированного кода еще больших преимуществ. 

Частные методы 

Частные (РгіѵаЬе) методы и переменные доступны только другим частным методам, частным переменным, и 
привилегированным методам (рассматриваемым в следующем разделе). Они представляют собой способ 
определения кода который будет доступен только внутри самого объекта, но не за его пределами. Эта технология 
основана на работе Дугласа Крокфорда (ОоидІаБ СгоскГогсІ), на чьем веб-сайте представлен ряд документов, 
детализирующих работу и порядок использования объектно-ориентированных объектов: 

• Список статей по ЭаѵаЗсгірЬ: МЫ:р:/^а ѵазсгі рб. сгоск^огсі. сот/ 

• Статья «РгіѵаЬе МетЬегз іп Эа ѵаБсгі рЬ»: ЬирУ^аѵазсгірСсгосИюпІсот/ргіѵаІіе.І'іітІ 

В листинге 2.23 мы можем увидеть пример того, как частный метод может быть использован в приложении. 

Листинг 2.23. Пример частного метода, пригодного только для использования функцией сопзіхисііог 

// Конструктор объекта, представляющего учебный класс 
ЬипсЬіоп С1аззгоош( збисіепЬз, ЬеасЬег ) { 

// частный метод, используемый для отображения всех учащихся класса 
ЬипсЬіоп сІізрО { 

аіегб ( Ытіз .пашез.) оіп (", ") ); 

} 


// Сохранение данных о классе в качестве публичных свойств объекта 
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йіз . збисІепЬз = збисІепЬз; 

ЬЬіз . ЬеасЬег = Ьеасііег; 

// Вызов частного метода для отображения ошибки 
йізр () ; 

} 

// Создание нового объекта сіаззгоош 

ѵаг сіазз = пем С1аззгоош( [ "ііоііп", "ВоЬ" ], "Мг. ЗтіЬЬ" ); 

// Невыполнимый код, поскольку сіізр не является публичным свойством объекта 
сіазз . сіізр () ; 

Несмотря на свою простоту, частные методы и переменные играют важную роль в избавлении кода от 
конфликтных ситуаций, позволяя лучше управлять тем, что видят и с чем работают ваши пользователи. Далее мы 
собираемся рассмотреть привилегированные методы, представляющие собой сочетание частных и публичных 
методов, которые можно использовать в ваших объектах. 

Привилегированные методы 

Термин привилегированные методы создал Дуглас Крокфорд (Эоидіаз Сгоскіогсі) для ссылки на методы, 
которые могут видеть частные переменные и работать с ними (внутри объекта), будучи доступными 
пользователям в качестве публичных методов. В листинге 2.24 показан пример использования 
привилегированных методов. 

Листинг 2.24. Пример использования привилегированных методов 

// Создание нового конструктора объекта бзег 
іипсЬіоп бзег( паше, аде ) { 

// Попытка определить год рождения пользователя 
ѵаг уеаг = (пем ОаЬе()). деЫГиІІУеаг () - аде; 

// Создание нового привилегированного метода, имеющего доступ к 
// переменной уеаг, сохраняя при этом публичную доступность 
ЬЬіз .деЬУеагВогп = ЬипсЬіоп () { 
гебигп уеаг; 

} ; 

} 

// создание нового экземпляра объекта изег 
ѵаг изег = пем Чзег( "ВоЬ", 44 ); 

// Проверка правильности возвращенного года 
аіегб ( изег.деЬУеагВогп() == 1962 ); 

//И уведомление о том, что нам недоступено частное свойство объекта уеаг 
аіегб ( изег.уеаг == пиіі ); 


В основном, привилегированные методы являются динамически сгенерированными, поскольку они 
добавляются к объекту во время выполнения программы, а не при первой компиляции кода. Хотя эта технология с 
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точки зрения вычислительных ресурсов считается более затратной, чем привязка простого метода к прототипу 
объекта, но помимо этого она является более мощной и гибкой. В листинге 2.25 показан пример того, что можно 
сделать, используя динамически генерируемые методы. 

Листинг 2.25. Пример динамически генерируемых методов, которые создаются при создании нового 
экземпляра объекта 

// Создание нового объекта изег, принимающего объект свойств (ргорегбіез) 
бипсбіоп бзег( ргорегбіез ) { 

// Последовательный перебор свойств объекта, и обеспечение 
// для них нужной области видимости (как ранее рассматривалось) 
бог ( ѵаг і іп ргорегбіез ) { (бипсбіоп (){ 

// Создание для свойства нового получателя 
Йіз[ "деб" + і ] = бипсбіоп() { 

гебигп ргорегбіез[і] ; 

} ; 

// создание для свойства нового установщика 
бЪіз [ "зеб" + і ] = бипсбіоп(ѵаі) { 

ргорегбіез[і] = ѵаі; 

} ; 

}) (); } 

} 

// Создание нового экземпляра объекта изег и передача в него объекта, 

// наполняющего его свойства 
ѵаг изег = пем Чзег({ 
паше: "ВоЪ", 
аде: 44 

}) ; 

// Обратите внимание, что свойства имя (паше) не существует, поскольку 
// внутри объекта ргорегбіез оно является частным 
аіегб( изег. паше == пиіі ); 

// Тем не менее, мы можем получить доступ к его значению, используя новый 
// метод дебпаше(), который был динамически сгенерирован 
аіегб ( изег.дебпаше() == "ВоЪ" ); 

//В заключение, мы можем убедиться в том, что у нас есть возможность 

// установить и получить возраст (аде) используя недавно сгенерированные 

// функции 

изег.зебаде( 22 ); 

аіегб ( изег.дебаде() == 22 ); 

Мощность динамически генерируемого кода трудно переоценить. Возможность создавать код на основе 
существующих переменных — исключительно полезное качество; именно оно делает столь мощными 
макрокоманды в других языках программирования (таких как Ызр), не выходя за контекст современного языка 
программирования. Далее мы рассмотрим тип метода, который полезен исключительно своими организационными 
преимуществами. 
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Статические методы 

Замысел, положенный в основу статических методов практически не отличается от замысла, касающегося 
любой другой нормальной функции. Тем не менее основное отличие состоит в том, что они существуют как 
статические свойства объекта. Будучи свойствами, они не доступны в контексте экземпляра этого объекта; доступ 
к ним открыт только в том же контексте, в котором существует и сам основной объект. Тем, кто знаком с 
традиционным наследованием, существующем в классах, это напоминает статические методы класса. 

Фактически единственным преимуществом от создания кода подобным методом является поддержание 
чистоты пространства имен объекта, понятия, которое более подробно будет рассмотрено в главе 3. В 
листинге 2.26 показан пример статического метода, присоединенного к объекту. 

Листинг 2.26. Простой пример статического метода 

// Статический метод, присоединенный к объект бзег 
бзег . сіопебзег = бипсбіоп ( изег ) { 

// Создание и возвращение нового пользователя (изег) 
гебигп пем бзег ( 

// это клон другого объекта изег 
изег.дебЫате(), 
изег.дебАде() 


} ; 


Статические методы являются первыми из тех, с которыми мы уже имели дело, чье назначение имеет 
чисто организационный характер. Это важная ступенька для перехода к теме, обсуждаемой в следующей главе. 
Фундаментальным аспектом разработки кода ЭаѵаЗсгірб профессионального качества является его возможность 
быстро и спокойно взаимодействовать с другими частями кода, оставаясь при этом ясным и доступным. Это 
важная цель, за достижение которой стоит побороться, и одна из тех целей, которую мы надеемся достичь в 
следующей главе. 

Выводы 

Важность усвоения понятий, затронутых в этой главе трудно переоценить. Первая половина главы, давая 
вам хорошее представление о том, как ведет себя язык ЭаѵаЗсгірб, и как он может быть использован наилучшим 
образом, является отправной точкой для полного понимания профессионального подхода к использованию 
^ѵаБсгірі. Простое представление о том, как действуют объекты, обрабатываются ссылки и определяется область 
видимости бесспорно может изменить ваш подход к написанию кода на ЭаѵаЗсгірб. 

По мере освоении навыков грамотного программирования на ^ѵаБсгірІ, становится все более очевидной 
важность создания качественного объектно-ориентированного ^ѵаБсгіріжода. Во второй половине этой главы 
мною были охвачены вопросы написания различного объектно-ориентированного кода, которые должны были 
устроить всех, кто пришел из других языков программирования. Это то самое искусство, на котором основана 
большая часть современного языка Эаѵа5сгірб, дающее вам существенное преимущество при разработке новых и 
технически прогрессивных приложений. 
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Глава 3 Создание кода широкого применения 

Разработка кода в сотрудничестве с другими программистами является стандартом для многих 
корпоративных и командных проектов, и здесь особую важность приобретает хорошая система разработки, 
способствующая совершению заранее продуманных действий. В связи с тем, что в последние годы ІаѵаЗсгірІ 
получил широкое признание, объем программного кода, разработанного профессиональными программистами, 
существенно возрос. Эти подвижки в восприятии и использовании ІаѵаЗсгірІ привели к существенному прогрессу 
в сопутствующей практике разработки. 

В данной главе мы собираемся рассмотреть ряд способов улучшения кода, совершенствования его 
организации и повышения качества, которые определяют его пригодность для использования другими 
программистами. 

Стандартизация объектно-ориентированного кода 

Первым и наиболее важным шагом в создании кода широкого применения станет стандартизация способов 
его написания в рамках всего приложения, что особенно важно для объектно-ориентированного кода. 
Рассматривая в предыдущей главе поведение объектно-ориентированного кода ІаѵаЗсгірІ, мы убедились в его 
особой гибкости, позволяющей придерживаться нескольких различных стилей программирования. 

Для начала важно продумать наиболее отвечающую вашим потребностям систему написания объектно- 
ориентированного кода и осуществления объектного наследования (клонирования свойств объекта в новые 
объекты). Наверное у всех, кто когда-либо создавал какой-нибудь объектно-ориентированный код на ІаѵаЗсгірІ, 
выработался свой собственный подход к этой работе, в котором может быть немало неразберихи. В этом разделе 
мы собираемся рассмотреть, как в Эаѵа5сгір1; работает наследование, после чего рассмотрим, как работают 
различные альтернативные вспомогательные методы, и как можно будет ими воспользоваться в вашем 
приложении. 

Наследование с использованием прототипов 

В Эа ѵаЗсгірі; используется уникальная форма создания объектов и наследования, которая называется 
прототипным наследованием. Суть этого метода (в отличие от классической схемы класс-объект, знакомой 
большинству программистов) состоит в том, что конструктор объекта может наследовать методы от другого 
объекта, создавая прототип объекта — ргоіоіуре, на основе которого строятся все остальные новые объекты. 

Весь этот процесс облегчается наличием свойства ргоіоіуре (Это свойство есть у любой функции, а раз 
конструктором может стать любая функция, то это свойство есть и у конструктора). Прототипное наследование 
сконструировано для одиночного, а не для множественного наследования, тем не менее существуют способы 
обхода этого ограничения, которые мы рассмотрим в следующем разделе. 

Эта форма наследования особенно сложна для понимания в той части, что прототипы не наследуют 
свойства от других прототипов или других конструкторов; они наследуют их от физических объектов. В 
листинге 3.1. показан ряд примеров конкретного применения свойства ргоіоіуре для осуществления простого 
наследования. 

Листинг 3.1. Примеры прототипного наследования 

// Создание конструктора для объекта Регзоп 
бипсбіоп Регзоп( паше ) { 

ІЬіз.паше = паше; 

} 
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// Добавление нового метода к объекту Регзоп 
Регзоп.ргобобуре.деСЛаше = Типсбіоп () { 

гебигп ДЬіз.паше; 

} ; 


// Создание нового конструктора объекта бзег 
Дипсбіоп бзег( паше, раззѵѵогсі ) { 

// Учтите, что здесь не поддерживается постепенная 

// перегрузка-наследование, например возможность вызова 

// конструктора суперкласса 

бЫз.паше = паше; 

іЬіз . раззѵѵогсі = раззѵѵогсі; 

} ; 


// Объект бзег наследует все методы объекта Регзоп 
бзег.ргобобуре = пем Регзоп(); 

// Для объекта бзег мы добавляет свой собственный метод 
Дзет. ргобобуре . деСРаззѵѵогсІ = Типсбіоп () { 

гебигп СЬіз . раззѵѵогсі; 

} ; 


В предыдущем примере наиболее важной для нас является строка 1)зег.ргобобуре = пеѵѵ Регзоп( );. Давайте 
разберемся в ее назначении более детально. ІІзег — это ссылка на функцию конструктора объекта ІІзег. При 
помощи выражения пеѵѵ Регзоп( ) создается новый объект Регзоп, использующий конструктор РегБоп. Результат 
его работы присваивается в качестве значения свойству ргоіюііуре конструктора Узег. Это означает, что при 
каждом использовании выражения пеѵѵ 11зег( ), новый объект УІзег будет обладать всеми методами, которые были 
у объекта Регзоп, на тот момент, когда вы использовали выражение пеѵѵ Регзоп( ). 

Помня об особенностях этой технологии, рассмотрим ряд различных надстроек, которые были написаны 
программистами для упрощения процесса наследования в Да ѵаЗсгі рб. 

Классическое наследование 

Классическое наследование представляет собой форму, знакомую большинству разработчиков. У вас есть 
классы с методами, на основе которых могут быть созданы экземпляры объектов. Новичкам объектно- 
ориентированного программирования на ЭаѵаЗсгірІ; свойственно предпринимать попытки подражания этому стилю 
программного конструирования, хотя немногим удается понять, как это сделать правильно. 

К счастью, один из мастеров программирования на Эаѵа5сгірб, Дуглас Крокфорд (Ооидіаэ Сгоскіюгсі), 
задался целью разработать простой набор методов, которые можно было бы использовать в ^ѵаЗсгірІ: для 
имитации такого же наследования, как и при использовании классов, о чем он рассказал на своем веб-сайте 
бирѴ/заѵаБсгірІі.сгоскІюгФсот/ іпМегИіапсе.ІгЬтІ . 

В листинге 3.2 показаны три функции, которые он построил для создания полноценной формы 
классического наследования в ЗаѵаЗсгірі. Каждая из функций претворяет в жизнь особый аспект наследования: 
наследование отдельной функции, наследование всех компонентов отдельного родительского объекта, и 
наследование индивидуальных методов от нескольких родителей. 

Листинг 3.2. Три функции, созданные Дугласом Крокфордом для имитации в Эа ѵа5сгірі: классического 


стиля наследования 
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// Простой вспомогательный метод, позволяющий привязать новую функцию к 
// прототипу объекта 

Еипсбіоп .ргобобуре.теббюб = бипсбіоп (паше, бипс) { 
бМз .ргобобуре [паше] = бипс; 
гебигп ббіз; 

} ; 


// Довольно сложная функция, позволяющая весьма изящно наследовать 
// функции из других объектов, и сохранять возможность вызова функции 
// 'родительского' объекта 

Еипсбіоп .теббюб(' іпбегібз ' , бипсбіоп (рагепб) { 

// Отслеживание, на каком уровне углубления в родительские функции мы 
// находимся 
ѵаг берббі = 0; 

// Наследование родительских методов 
ѵаг ргобо = ббііз .ргобобуре = пем рагепб(); 

// Создание новой 'привилегированной' функции под названием 'иЪег', 

// которая при вызове выполняет любую функцию, вписанную 
// в наследование 

бЫз .шебЬоб ( ' иЪег ' , бипсбіоп иЬег(паше) { 

ѵаг бипс; // исполняемая функция 

ѵаг геб; // возвращение значения функции 

ѵаг ѵ = рагепб.ргобобуре; // родительский прототип 

// Если мы уже находимся внутри другой функции 'иЪег' 
іб (бербЬ) { 

// спуск на необходимую глубину для поиска исходного прототипа 
бог (ѵаг і=б; і > 0;і+= 1 ) { 

ѵ = ѵ.сопзбгисбог.ргобобуре; 

} 

// и получение функции из прототипа 
бипс = ѵ[паше]; 


// А если это первый вызов 'иЪег' 

} еізе { 

// получение выполняемой функции из прототипа 
бипс = ргобо [паше]; 

// Если функция была частью этого прототипа 
іб ( бипс == бЬіз [паше] ) { 

// переход вместо этого к родительскому прототипу 
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бипс = ѵ[паше]; 

} 

} 

// Отслеживание той глубины, на которой мы находимся в стеке 
// наследования 
бербЪ. += 1; 

// Вызов выполняемой функции со всеми аргументами, кроме первого 

// (в котором хранится имя исполняемой функции) 

геб = бипс . арріу (бМз, Аггау.ргобобуре. зіісе . арріу (агдишепбз, 

[ 1 ])) ; 

// Сброс глубины стека 
бербЪ. -= 1; 

// Возвращение значения, возвращаемого выполняемой функцией 
гебигп геб; 

}) ; 

гебигп ббіз; 


// Функция для наследования только двух функций из родительского 
// объекта, но не каждой функции, использующей пем рагепбО 
Випсбіоп .теббюб(' змізз ', бипсбіоп (рагепб) { 

// Перебор всех наследуемых методов 

бог (ѵаг і = 1; і < агдишепбз. ІепдбЬ; і += 1) { 

// Имя импортируемого метода 
ѵаг паше = агдишепбз [і]; 

// Импорт метода в прототип этого объекта 
ббіз.ргобобуре [паше] = рагепб.ргобобуре [паше] ; 

} 


гебигп бМз; 

}) ; 

Посмотрим, что именно нам дают эти три функции, и почему мы должны их использовать вместо того, 
чтобы попытаться создать свою собственную модель прототипного наследования. Замысел их разработки 
довольно прост: 

Гипсііоп.ргоіоіуре.теіМосІ: Служит простым способом присоединения к прототипу конструктора. Это 
замкнутое выражение работает благодаря тому, что все конструкторы являются функциями, и получают таким 
образом новый метод теШосІ. 

Гипсііоп.ргоіоіуре.іпііегііз : Эта функция может быть использована для обеспечения простого наследования 
от одного родителя. Код этой функции концентрируется вокруг возможности вызова ГЫз.иЬегСтеШосШате 1 ) в 
любом из ваших методов объекта, и предоставлении ему возможности выполнения перезаписываемого им метода 
родительского объекта. Это один из подходов, не встроенных в модель наследования ЭаѵаЗсгірІ:. 
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Гипсііоп.ргоіоіуре.зѵѵізз: Это усовершенствованная версия функции .гпеИпосК ), которая может быть 
использована для захвата нескольких методов из одного родительского объекта. Если ее использовать вместе с 
несколькими родительскими объектами, вы можете получить разновидность функционального, множественного 
наследования. 

Теперь, когда у вас есть представление о том, что нам дают эти функции, листинг 3.3 возвращает нас к 
примеру Регзоп-ІІзег, который был рассмотрен в листинге 3.1, но теперь уже с новой, классической 
разновидностью наследования. Вдобавок к этому вы можете увидеть, какие дополнительные функциональные 
возможности дает эта библиотека, а также несколько прояснить ситуацию. 

Листинг 3.3. Примеры использования ІаѵаЗсгірі-функций классической разновидности наследования, 
разработанных Дугласом Крокфордом 


// Создание нового конструктора объекта Регзоп 
бипсбіоп Регзоп( паше ) { 

бЫз.пате = паше; 

} 

// Добавление нового метода к объекту Регзоп 
Регзоп . теббюб ( 'дебЛате', бипсбіоп (){ 
гебигп пате; 

}) ; 

// Создание нового конструктора объекта Дзет 
бипсбіоп Дзет ( пате, раззмогб ) { 

ббіз.пате = пате; 

Шз .раззмогб = раззѵгогсі; 

}, 


// Наследование всех методов объекта Регзоп 
Цзег. іпЬегібз ( Регзоп ); 

// Добавление нового метода к объекту Цзег 
Дзег .шебЬосі ( ' дебРаззѵгогсІ ' , Дипсбіоп () { 
гебигп бЬіз . раззѵтогсі; 

}) ; 

// перезапись метода, созданного объектом Регзоп, 

// но еще один вызов этого метода с использованием функции иЪег 
Дзет .шебЬосі ( 'дебЛате', бипсбіоп(){ 

гебигп "Мое имя: " + ббіз.иЪег('дебЛате'); 

}) ; 


Теперь, когда у вас начал проявляться вкус к тем возможностям, которые предоставляются надежной, 
улучшающей свойства наследования библиотекой ІаѵаЗсгірІ, нужно рассмотреть некоторые другие, довольно 
распространенные и популярные методы. 


Библиотека Вазе 
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Недавним вкладом в области создания объектов и наследования в ^ѵаБсгірІ, стала библиотека Вазе, 
разработанная Дином Эдвардсом (Оеап Есіѵѵагсіз). В этой библиотеке предлагается ряд различных способов 
расширения функциональных возможностей объектов. Дополнительно в ней предлагаются интуитивно понятные 
средства объектного наследования. Первоначально Дин разрабатывал Вазе для использования в некоторых своих 
побочных проектах, включая проект ІЕ7, который служил в качестве полноценного набора обновлений к Іпіегпеі: 
Ехріогег. На веб-сайте Дина (бирѴ/сіеап.есіѵѵагсіз. пате/отеЫод/2006/03/Ьазе/) приведены весьма разнообразные 
примеры, достаточно хорошо раскрывающие возможности библиотеки. В дополнение к ним можно найти ряд 
примеров в каталоге исходного кода Вазе: ННрѴ/сіеап.есіѵѵагсіз. пате/Ьазе/. 

Поскольку Вазе довольно объемная и сложная библиотека, она заслуживает дополнительных разъяснений 
(которые включены в код, предоставленный в разделе Боигсе Сосіе/Ооѵѵпіоасі на веб-сайте Аргезз — 
НІф://ѵѵ\л/ѵѵ.арге55.сот). Я настоятельно рекомендуется в дополнение к чтению этого закомментированного кода 
просматривать примеры, предоставленные Дином на его веб-сайте, поскольку они могут оказаться исключительно 
полезными для разъяснения наиболее запутанных моментов. 

Но для начала я собираюсь разобраться с несколькими важными аспектами Вазе, которые могут оказаться 
очень полезными для ваших разработок. В частности, в листинге 3.4 представлены примеры создания класса, а 
также наследования от одного родителя, и замещения родительской функции. 

Листинг 3.4. Примеры использования библиотеки Вазе Дина Эдвардса для создания простого класса и 
организации наследования 


// Создание нового класса Регзоп 
ѵаг Регзоп = Вазе . ехбепсі ({ 

// Конструктор класса Регзоп 
сопзбгисбог: бипсбіоп ( паше ) { 

ВЫ з. паше = паше; 

}, 


// простой метод класса Регзоп 
деСЛаше: іипсбіоп () { 

гебигп ГЬіз.паше; 

} 


// Создание нового класса Цзег, являющегося наследником класса Регзоп 
ѵаг Цзег = Регзоп . ехбепсі ({ 

// Создание конструктора класса Цзег 
сопзбгисбог: бипсбіоп ( паше, раззѵѵогсі ) { 

// который, в свою очередь, вызывает метод конструктора 
// родительского класса 
СЬіз.Ъазе( паше ); 

СЬіз . раззѵтогсі = раззмогсі; 


// Создание еще одного простого метода для Цзег 
дебРаззмогсІ : бипсбіоп () { 

гебигп бЬіз . раззмогсі; 
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} 


}) ; 


Посмотрим, как Ва5е удается достичь трех целей, обозначенных в листинге 3.4, и создать простую форму 
создания объекта и организации наследования: 

Вазе.ех(:епсІ( );: Это выражение используется для создания нового базового объекта конструктора. 
Функция берет одно свойство — простой объект, содержащий свойства и значения, которые добавлены к объекту 
и использованы в качестве его прототипных методов. 

Рег50п.ехіепс1( );: Это альтернативная версия синтаксиса Вазе.ех(:епс1( ). Все конструкторы, созданные с 
помощью метода .ехіепсі( ), получают свой собственный метод ,ех(:епс1( ), а значит, и возможность 
непосредственного наследования от них. В листинге 3.4. конструктор ІІзег создается за счет непосредственного 
наследования от исходного конструктора Регзоп. 

іІііз.Ьазе();\ И, наконец, метод ІІіі5.Ьа5е( ) используется для вызова родительской функции, которая была 
заменена. Заметьте, что это несколько отличается от функции бМі5.иЬег( ), используемой в классической 
библиотеке Крокфорда, поскольку вам не нужно предоставлять имя родительской функции (что может помочь в 
наведении порядка и разъяснении кода). Среди всех объектно-ориентированных библиотек ЭаѵаЗсгі рС, Вазе 
обладает наилучшими функциональными возможностями по замене родительских методов. 

Лично я считаю, что разработанная Дином библиотека Вазе создает наиболее читаемый, функциональный 
и понятный объектно-ориентированный код ЭаѵаЗсгірІ:. В конечном счете выбор наиболее подходящей библиотеки 
остается за разработчиком. Далее мы рассмотрим, как объектно-ориентированный код реализован в популярной 
библиотеке Ргоіоіуре. 

Библиотека Ргоіоіуре 

Ргоіоіуре — это библиотека ЭаѵаЗсгірІ:, которая была разработана для работы в связке с популярной веб¬ 
средой РиЬу оп Ріа Из. Ее название не стоит путать со свойством конструктора ргоіюіу ре — это всего лишь нелепое 
совпадение. 

Если не брать в расчет название, Ргоіоіуре делает ІаѵаЗсгірі по внешнему виду и поведению во многом 
похожим на язык КиЬу. Чтобы добиться этого эффекта, разработчики Ргоіоіуре воспользовались объектно- 
ориентированной природой ІаѵаЗспрі, и присоединили к ядру объектов ІаѵаЗсгірІ ряд функций и свойств. К 
сожалению, сама библиотека своим создателем вообще не документировалась, но, к счастью, она написана очень 
понятно, и многие ее пользователи приступили к созданию собственных версий документации. Весь основной код 
Ргоіоіуре можно совершенно свободно просмотреть на веб-сайте МНр://рго1:о(:уре.сопіо.пе1:/. А в статье «Раіпіезз 
ІаѵаЗсгірІ: ІІзіпд Ргоіоіуре» по адресу МЬЬр://ѵѵѵѵѵѵ.5И:ероіп1:.сот/аг1:ісІе/раіпІе55-даѵа5сгір1;-рго1:оІ:уре/ можно найти 
документацию по этой библиотеке. 

В этом разделе мы собираемся рассмотреть лишь специфические функции и объекты, которые 
используются в Ргоіоіуре для создания ее объектно-ориентированной структуры и обеспечения основ 
наследования. В листинге 3.5 представлен весь код, который Ргоіоіуре использует для достижения этой цели. 

Листинг 3.5. Две функции, используемые Ргоіоіуре для воспроизводства объектно-ориентированного кода 
ІаѵаЗсгірІ: 


// Создание глобального объекта по имени 'Сіазз', 
ѵаг Сіазз = { 
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// который обладает единственной функцией, создающей новый объект 
// конструктора 
сгеабе: Типсбіоп () { 

// Создание безымянного объекта конструктора 
гебигп Типсбіоп () { 

// ТМз вызывает свой собственный метод инициализации 
ЬЬіз . іпібіаііге . арріу (Йіз, агдитепЬз) ; 

} 

} 

} 

// Добавление статического метода к объекту О^есЬ, который копирует 

// свойства из одного объекта в другой 

ОЬ^есб.ехбепсі = ТипсЬіоп(ЬезЬіпаЬіоп, зоигсе) { 

// проход через все свойства для их извлечения 
Дог (ргорегбу іп зоигсе) { 

// и добавления к объекту назначения 
сІезЬіпаЬіоп [ргорегбу] = зоигсе [ргорегбу] ; 

} 

// возвращение модифицированного объекта 
гебигп ЬезЬіпаЬіоп; 

} 


Ргоіоіуре действительно использует всего лишь две определенные функции для создания и управления 
всей объектно-ориентированной структурой. Изучая код, вы можете обратить внимание на то, что этот подход 
явно слабее, чем в Вазе или в классическом методе Крокфорда. В основу этих двух функций положен весьма 
простой замысел: 

Оа55.сгеа1е()\ Эта функция просто возвращает надстройку в виде безымянной функции, которая может 
быть использована в качестве конструктора. Этот простейший конструктор всего лишь вызывает и выполняет 
свойство инициализации объекта. Стало быть, должно, по крайней мере, существовать свойство іпШаІііе, 
содержащее функцию вашего объекта; в противном случае код выдаст исключение. 

ОЬ]есі.ехіепсІ()\ Эта функция просто копирует все свойства из одного объекта в другой. При 
использовании имеющегося в конструкторах свойства ргоіоіуре, можно разработать более простую форму 
наследования (проще, чем исходная форма прототипного наследования, доступная в ^ѵаЗсгір!:). 

Теперь, когда вы узнали, как работает код, положенный в основу РгоІюЬуре, в листинге 3.6 показываются 
несколько примеров его использования в самой библиотеке Ргоіоіуре с целью расширения «родных» объектов 
^ѵаЗсгірі и придания им нового уровня функциональности. 

Листинг 3.6. Примеры использования в Ргоіоіуре объектно-ориентированных функций для расширения 
исходных возможностей по обработке строк в ^ѵаЗсгірІ: 


// Добавление к прототипу Збгіпд дополнительных методов 
ОЬ^ есб . ехбепсі ( ЗЬгіпд . ргоЬобуре, { 

// Новая функция удаления из строки тегов НТМЬ 
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збгірТадз: Дипсбіоп() { 

гебигп бПіз.геріасе(/<\/?[ А >]+>/ді, ''); 

}, 


// Превращение строки в массив символов 
боАггау: ДипсбіопО { 

гебигп іЬіз . зрШ; (' ' ) ; 

Ь 


// Превращение текста вида "Доо-Ъаг" в 'горбатый' вариант — "ДооВаг" 
сашеііге: ДипсбіопО { 

// Разбиение строки по дефисам 
ѵаг оЗбгіпдЬізб = біііз.зрііб('-') ; 

// Досрочный возврат, если дефисы отсутствуют 
ІД (оЗбгіпдЬізб . ІепдбЬ. == 1) 
гебигп оЗбгіпдЬізб[0] ; 

// Дополнительная обработка начала строки 
ѵаг сатеІігесІЗбгіпд = ббіз.іпбехОД('-') == О 

? оЗбгіпдЬізб[0].сбагАб(0).боЫррегСазе() + 

оЗбгіпдЬізб[0].зиЪзбгіпд(1) : оЗбгіпдЬізб [0]; 

// Превращение первых букв каждой последовательной части в заглавные 
Дог (ѵаг і = 1, Іеп = оЗбгіпдЬізб.ІепдбЬ; і < Іеп; і++) { 

ѵаг з = оЗбгіпдЬізб [і]; 

сатеІігесІЗбгіпд += з . сЬагАб (0) . боЫррегСазе () + з.зиЪзбгіпд(1); 

} 


// и возврат модифицированной строки 
гебигп сатеІігесІЗбгіпд; 

} 

}) ; 

// Пример использования метода збгірТадзО. 

// Можете убедиться, что он удаляет из строки весь НТМЬ, 

// и оставляет нам строку, состоящую только из одного текста 
"<Ь><і>Не11о</і>, ѵгогіб! " . збгірТадз () == "Неііо, могіб!" 

// Пример использования метода боАггауО . 

// Мы извлекаем из строки четвертый символ 
"аЪсбеДд" .боАггау()[3] == "б" 

// Пример использования метода сашеІігеО . 

// Он переделывает старую строку в новый формат. 
"Ьаскдгоипб-соіог" . сашеііге () == "ЬаскдгоипбСоІог" 
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Теперь вернемся к примеру, который уже использовался в этой главе, где фигурировали объекты Регзоп и 
ІІзег, и объект Ыгег являлся наследником объекта Регзоп. Этот код, использующий объектно-ориентированный 
стиль Ргоіоіуре, показан в листинге 3.7. 

Ызііпд 3-7. Вспомогательные функции Ргоіоіуре, предназначенные для создания классов и осуществления 
простого наследования 

// Создание нового объекта Регзоп с использованием пустого конструктора 
ѵаг Регзоп = Сіазз .сгеабе(); 

// Копирование ряда функций в прототип Регзоп 
ОЬ^ есб . ехбепсі ( Регзоп.ргобобуре, { 

// Функция, немедленно вызываемая конструктором Регзоп 
іпібіаііге: бипсбіоп ( паше ) { 

бЬіз.пате = паше; 

Ь 


// Простая функция для объекта Регзоп 
дебИагпе: бипсбіоп () { 

гебигп бЬіз.паше; 

} 

}) ; 

// Создание нового объекта ІІзег с использованием пустого конструктора 
ѵаг Цзег = Сіазз .сгеабе(); 

// Объект Цзег наследует все функции своего родительского класса 
Цзег. ргобобуре = ОЬ ^ есб . ехбепб ( пей РегзопО, { 

// Переписывание старой функции іпібіаііге заново 
іпібіаііге: бипсбіоп ( паше, раззмогсі ) { 

бЬіз.паше = паше; 
бЬіз . раззмогсі = раззмогсі; 

}, 


// добавление новой функции к объекту 
дебРаззмогЬ: бипсбіоп() { 
гебигп бЬіз . раззмогсі; 

} 


Хотя предлагаемые библиотекой Ргоіоіуре объектно-ориентированные технические приемы не являются 
революционными, они достаточно сильны, чтобы помочь разработчику в создании простого и легко читаемого 
кода. В конце концов, если вам приходится создавать довольно большой объем объектно-ориентированного кода, 
то вы, для облегчения задачи, скорее всего, остановите свой выбор на библиотеке Ваге. 

Далее мы собираемся рассмотреть приемы подготовки своего объектно-ориентированного кода для 
широкого использования с кодом других разработчиков и библиотек. 


Создание пакета 
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После завершения работы над вашим великолепным объектно-ориентированным кодом на ЗаѵаЗсгірІ: (или 
во время его написания, если у вас хватает на это мудрости), настает время для доведения его до определенной 
степени совершенства, позволяющей ему безупречно работать с другими библиотеками ^ѵаЗсгірі. К тому же 
важно понять, что ваш код должен будет использоваться другими разработчиками и пользователями, требования 
которых могут отличаться от ваших. Возможно, эта задача решается путем написания самого совершенного кода, 
но ее выполнению может поспособствовать и изучение того, что уже сделано другими. 

В этом разделе мы рассмотрим несколько больших библиотек, используемых ежедневно тысячами 
разработчиков. Каждая из этих библиотек предоставляет уникальные способы управления своей структурой, 
которые облегчают ее использование и изучение. В дополнение к этому мы рассмотрим несколько способов, 
которыми можно воспользоваться для очистки своего кода, чтобы у других разработчиков могло сложиться о нем 
самое благоприятное впечатление. 

Организация пространства имен 

Довольно важный и в то же время простой технический прием, который можно применить для очистки и 
упрощения кода, связан с понятием пространства имен. На данный момент ^ѵаЗсгірі: по умолчанию не 
поддерживает пространства имен (в отличие, к примеру, от ^ѵа или РуШоп), поэтому нам приходится обходиться 
соответствующей, тем не менее, похожей техникой. 

В действительности в ЗаѵаЗсгірІ: нет ничего, что могло бы употребляться в качестве пространства имен. 
Тем не менее, воспользовавшись упомянутым выше положением, что в ]аѵа5сгір1; все объекты могут иметь 
свойства, которые в свою очередь могут содержать другие объекты, вы можете создать что-нибудь такое, что 
выглядит и работает практически так же, как и пространство имен, используемое в других языках 
программирования. Используя эту технологию, можно создать уникальные структуры, подобные тем, что показаны 
в листинге 3.8. 

Листинг 3.8. Организация пространства имен а ^ѵаЗсгірі: и его применение 


// Создание используемого по умолчанию глобального пространства имен 
ѵаг УАНОО = {}; 

// Установка некоторых дочерних пространств имен с помощью объектов 
УАНОО. ибіі = {}; 

// Создание заключительного пространства имен, которое содержит свойство с 

// функцией 

УАНОО. ибіі . Еѵепб = { 

асісіЕѵепбЬізбепег : бипсбіоп () { ...; } 

} ; 


// Вызов функции внутри конкретно этого пространства имен 
УАНОО . ибіі . Еѵепб . асМЕчепбЫзбепег ( ...; ) 


Рассмотрим несколько примеров организации пространства имен в ряде различных популярных библиотек, 
и то, как они вписываются в цельную, расширяемую и дополняемую архитектуру. 


Роіо 
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Оо;і'о — это чрезвычайно популярная среда, удовлетворяющая всем потребностям разработчиков в 
создании полноценных веб-приложений. Это означает, что в ней содержится масса подчиненных библиотек, 
которые нуждаются в индивидуальном включении и оценке, поскольку вся библиотека слишком велика, и с ней 
не так-то легко справиться. Дополнительная информация о Эо]о может быть найдена на веб-сайте проекта: 
бир://б оріоо I кіі: . о гд/. 

В Эо]о имеется целая система создания пакетов, построенная вокруг организации пространства имен в 
іаѵаЗсгірі. Вы можете импортировать новые пакеты в динамическом режиме, при котором они будут 
автоматически выполнены и готовы к использованию. В листинге 3.9 показан пример организации пространства 
имен, используемой в Оо;іо. 

Листинг 3.9. Создание пакетов и организация пространства имен в Вор 


<Ы:ш1> 

<Ьеай> 

<бі'Ые>Ассогсііоп Кійдей Бето</1:і'Ые> 

<!-- Включение Бодо Егатемогк --> 

<зсгірй буре="1;ех1;/д аѵазсгірй" згс="йод о . д з"></зсгірй> 

<!-- Включение различных пакетов Бодо --> 

<зсгірй буре="'Ьех'Ь/д аѵазсгірй"> 

// Для создания Ассогсііоп Сопйаіпег мійдей импортируются и 

// используются два различных пакета 

йод о. гедиіге ("Йод о. мійдей . АссогйіопСопйаіпег" ) ; 

йод о. гедиіге ("Йод о. мійдей .СопйепйРапе") ; 

</ зсгірО 
</Ьеай> 

<Ьойу> 

<йіѵ йод оТуре="АссогйіопСоп1:аіпег" 1аЬе1ЛойеС1азз="1аЬе1"> 

<йіѵ йодоТуре="Соп'Ьеп'ЬРапе" ореп="йгие" 1аЬе1="Рапе 1"> 

<Ь2>Рапе 1</Ь2> 

<р>Липс сопзедиай пізі ѵійае диаш. Зизрепйіззе зей пипс. Ргоіп...; </р> 

</йіѵ> 

<йіѵ йодоТуре="Соп'Ьеп'ЬРапе" 1аЬе1="Рапе 2"> 

<Ь2>Рапе 2</Ь2> 

<р>Липс сопзедиай пізі ѵійае диаш. Зизрепйіззе зей пипс. Ргоіп...; </р> 

</йіѵ> 

<йіѵ йодоТуре="Соп'Ьеп'ЬРапе" 1аЬе1="Рапе 3"> 

<Ь2>Рапе 3</Ь2> 

<р>Липс сопзедиай пізі ѵійае диаш. Зизрепйіззе зей пипс. Ргоіп...; </р> 

</йіѵ> 

</йіѵ> 

</Ьойу> 

</Ы;т1> 

Если вас интересуют вопросы поддержки больших базовых блоков программного кода на Эа ѵаЗсгі рС, то 
очень мощная пакетная архитектура Оодо безусловно заслуживает внимания. Дополнительно замечу, что очень 
большой объем библиотеки заставит вас выискивать в ней те функциональные возможности, которые смогут 
оказаться полезными. 
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ѵш 


Есть еще одна библиотека, обслуживающая архитектуру больших пакетов с организованным 
пространством имен — ІаѵаЗсгірІ Уабоо III (ИІІрѴ/беѵеІорег.уаІіоо.сот/уиі/). Эта библиотека разработана для 
осуществления и обеспечения решений ряда широко распространенных выразительных средств веб-приложений 
(таких как перетаскивание элементов). Все эти Ш-элементы разбиты на части и распространяются в соответствии 
с определенной иерархией. Для библиотеки Уабоо III разработана хорошая документация, которая заслуживает 
внимания своей полнотой и детализацией. 

Для организации функций и свойств в Уабоо III используется глубокая иерархия пространства имен, во 
многом похожая на ту, что используется в Эо)о. Но в отличие от Эо)о, любое «импортирование» внешнего кода 
осуществляется только вами, а не оператором импортирования. В листинге 3.10 показан пример внешнего вида и 
работы пространства имен в библиотеке УаИоо III. 

Листинг 3.10. Создание пакетов и организация пространства имен в библиотеке УаИоо III 


<Ы:ш1> 

<Ьеа<3> 

<'Сі'Ые>Уа1іоо ! ІЛ Бешо</'Ы'Ые> 

<!-- Импорт основной библиотеки УаЬоо ІЛ --> 

<5сг ірб буре="бехб/^ аѵазсгірб" згс="УАН00 . ^ з"Х/зсгірб> 

<!-- Импорт пакета обработки событий --> 

<5сгірб буре="бехб/^ аѵазсгірб" згс="еѵепб . ^ з"Х/зсгірб> 

<!-- Использование импортированной библиотеки УаЬоо ІЛ --> 

<зсгірб буре="бехб/^ аѵазсгірб"> 

// Все обработчики событий и утилиты УаЬоо содержатся в 
// пространстве имен УАНОО, и дополнительно разбиты на более мелкие 
// пространства имен (подобные 'ибіі') 

УАНОО. ибіі . Еѵепб . асісІЬізбепег ( 'Ьиббоп', ' сііск', Уипсбіоп () { 

аіегб ( "Спасибо, что щелкнули на кнопке!" ); 

}) ; 

</ зсгірО 
</Ьеа<3> 

<Ьобу> 

<іприб буре="Ьиббоп" ісі="Ьиббоп" ѵаіие="Щелкните !"/> 

</Ьобу> 

</Ьбш1> 

Обе библиотеки, и Эо)о, и Уабоо III, очень хорошо справляются с организацией и обслуживанием 
значительных объемов кода в пределах одного большого пакета. Понимание того, как они это делают, сможет 
принести вам неоценимую помощь, когда наступит время самим обеспечивать работу архитектуры пакета. 

Очистка программного кода 

Перед тем как перейти к теме отладки или создания тестовых примеров (что я собираюсь сделать в 
следующей главе) сначала нужно рассмотреть как создается код, готовый к использованию другими 
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разработчиками. Если вы хотите, чтобы ваш код продолжил свое существование, и был востребован и 
модифицирован другими разработчиками, нужно настроиться работу по избавлению кода от таких операторов, 
которые могли бы быть неправильно истолкованы или использованы. Конечно, можно пройтись по коду и 
очистить его вручную, но лучше все же воспользоваться инструментом, который поможет заметить ненадежные, 
потенциально проблемные участки кода. Именно здесь нам может пригодиться 151_іп1 — набор встроенных 
правил, определяющих участки кода, способные в будущем вызвать проблемы у вас или у других разработчиков. 
Полноценный анализатор доступен на веб-сайте ІБЫпІ по адресу: МірѴ/ѵѵѵѵѵѵ.ізІіпІ.сот/. Дополнительно все 
правила и установки 15І_іп1 могут быть найдены по адресу: Ь1ір://\л/ѵѵѵѵ.]5Ііпі.сопУІІпі.ІпітІ. 

15І_іп1 — это еще один инструмент, разработанный Дугласом Крокфордом (Эоидіаз СгоскГогб) в 
свойственной ему манере, поэтому если вас что-то не устраивает или не вызывает доверия, то такие положения 
можно просто проигнорировать. Тем не менее, некоторые из этих правил целиком отвечают здравому смыслу, 
поэтому я собираюсь разобраться в них поподробнее. 

Объявление переменных 

Одно из разумных правил, введенных в ІБЫпІ: гласит о том, что все переменные, используемые в 
программе, должны быть объявлены перед их использованием. Хотя в ІаѵаБсгірІ явные требования по объявлению 
переменных отсутствуют, но игнорирование этого правила может вызвать путаницу, касающуюся их фактических 
областей видимости. Например, если нужно присвоить значение необъявленной переменной внутри функции, то 
как следует рассматривать ее область видимости, внутри функции или глобально? Без просмотра кода тут не 
обойтись, и этот вопрос неплохо бы прояснить. Пример установленного в 15І_іп1 порядка объявления переменных 
показан в листинге 3.11. 

Листинг 3.11. Требования 15І_іп1 к объявлению переменных 


// Неправильное использование переменной 
Тоо = 'Ъаг'; 

// Правильное использование переменной 
ѵаг Тоо; 

... г 

іоо = 'Ъаг'; 


Операторы != и == против операторов ! = = и = = = 

Существует одна типичная ошибка, допускаемая разработчиками из-за недостаточного понимания 
значений Іаізе, используемых в ІаѵаБсгірІ. В этом языке пиІІ, 0, ”, Гаізе и ипсіебпесі все идентичны ( = = ) друг 
другу, поскольку при их вычислении возникает значение Гаізе. Это означает, что если вы используете код іезі = = 
Гаізе, то в результате его вычисления будет получено значение ігие, если переменная Іезі так же имеет значение 
ипсІеПпесІ или равна нулю, что может не совпадать с тем, что вам на самом деле нужно. 

И тут на выручку приходят операторы !== и ===. Оба эти оператора рассматривают явное значение 
переменной (к примеру, пиІІ), а не только результат ее вычисления (к примеру, Іаіве). 15І_іп1 требует, чтобы при 
работе с Гаіве-значениями вместо оператора != или оператора == использовался оператор !== или оператор 
= = = . В листинге 3.12 показан ряд примеров, показывающих, чем отличаются эти операторы друг от друга. 

Листинг 3.12. Примеры отличий != и == от ! = = и = = = 
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// Оба результата имеют значение бгие 
пиіі == баізе 
О == ипбебіпеб 

// Вместо этого в сравнении нужно использовать !== или === 
пиіі !== баізе 
баізе === баізе 

Блоки и скобки 

Это правило я воспринимаю с трудом, тем не менее, если вы работаете в общедоступной среде 
программирования, то есть смысл его придерживаться. Оно гласит, что от использования однострочных блоков 
следует отказаться. Когда есть условие (к примеру, ІГ (бод == саі )), внутри которого только один оператор (бод 
= Гаізе;) то скобки, которые обычно требуются для оформления этого условия, можно опустить. То же самое 
справедливо и для блоков ѵѵМІе( ) и Гог( ). Хотя это сокращение, предоставляемое ІаѵаЗсгірІ;, можно только 
приветствовать, игнорирование скобок в программном коде может вызвать ряд непонятных последствий для тех, 
кто не понимает, какой код находится внутри блока, а какой — за его пределами. Эта ситуация достаточно 
понятно раскрывается в листинге 3.13. 

Листинг 3.13. Неправильно оформленные блоки кода, содержащие один оператор 


// Это вполне допустимый, нормальный код баѵазсгірб 
іб ( бод == саб ) 
іб ( саб == тоизе ) 
тоизе = "сбеезе"; 


// бЗЬіпб требует, чтобы все это было оформлено следующим образом: 
іб ( бод == саб ) { 

іб ( саб == тоизе) { 
тоизе = "сбеезе"; 

} 

} 

Точки с запятой 

Польза от этого последнего положения станет особенно очевидной при рассмотрении следующего раздела 
о сжатии кода. Точку с запятой в конце оператора, если он единственный в строке в ЭаѵаЗсгі рб, ставить не 
обязательно. Если ваш код не сжат, то отсутствие точки с запятой выглядит вполне нормально, но как только 
символы конца строки будут удалены с целью сокращения размера файла, сразу же возникнут проблемы. Чтобы 
избежать подобной ситуации, не следует забывать, что в конце всех операторов нужно ставить точку с запятой, 
как показано в листинге 3.14. 

Листинг 3.14. Операторы, требующие наличия точек с запятой 


// Если вы собираетесь сжимать код баѵазсгірб, то 
// обязательно ставьте точки с запятой в конце всех операторов 
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ѵаг боо = ' Ъаг ' ; 
ѵаг Ьаг = бипсбіоп () { 
аіегб ( ' Ьеііо ' ) ; 

} ; 

Ьаг () ; 


В конечном счете это последнее положение подводит нас к понятию сжатия кода ІаѵаЗсгірі. Если 
использование 15І_іпІ: для создания безупречного кода приносит пользу другим разработчикам и вам самим, то 
сжатие наиболее полезно для ваших пользователей, поскольку оно позволяет увеличить скорость работы с вашим 
веб-сайтом. 

Сжатие 

Наиболее важным аспектом распространения библиотеки ІаѵаЗсгірІ является сжатие кода, позволяющее 
сократить время передачи информации по сети. Сжатие должно использоваться в качестве последнего шага, 
перед самым выпуском вашего кода в эксплуатацию, поскольку зачастую в результате этой операции 
распознаваемость кода резко ухудшается. Существует три разновидности сжатия кода ІаѵаЗсгірІ:: 

• Сжатие, при котором из кода просто удаляются все пустые места и комментарии, после чего в коде 
остается только самое необходимое. 

• Сжатие, при котором удаляются все пустые места и комментарии, а также сокращаются имена всех 
переменных. 

• Сжатие, при котором делается все, ранее перечисленное, а также сокращается до минимума длина всех 
слов вашего кода, а не только имен переменных. 

Я собираюсь рассмотреть две различные библиотеки: ІБМІп и Раскег. ІЗМіп подпадает под первую 
категорию сжатия (удаления всего, что не имеет отношения к коду), а Раскег подпадает под третью категорию 
(полное сжатие всех слов). 

.35МІП 


Идея, заложенная в 15МІП довольно проста. При обработке блока кода ІаѵаЗсгірі из него удаляются все 
ничего не значащие символы, и остается только чистый функциональный код. В ІЗМІп это достигается простым 
удалением всех лишних пустых символов (включая знаки табуляции и коды конца строк) и всех комментариев. 
Интернет-версия программы сжатия выложена по адресу: И1:1:р: //ѵѵѵѵѵѵ.сгоскбогсі .сот/)а ѵазсгір1:/)зті п .ЬіЬтI. 

Чтобы понять, что происходит с кодом при его обработке ІБМІп, мы возьмем блок кода (показанный в 
листинге 3.15), пропустим его через минимизатор, и посмотрим результат в листинге 3.16. 

Листинг 3.15. Код определения типа пользовательского браузера 

// (с) 2001 Боидіаз СгоскЬогсі 
// 2001 Ципе 3 

// Объект -із- используется для идентификации браузера. Каждая версия 
// браузера способна к самоидентификации, но стандартных способов 
// осуществления этой операции нет, и некоторые результаты идентификации 
// вводят вас в заблуждение. Причина в том, что создатели 
// веб-браузеров — неисправимые лжецы. К примеру, браузеры МісгозоЕб 
// ІЕ заявляют, что они — Могіііа 4. А Лебзсаре 6 заявляет, что он — 
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// ѵегзіоп 5. 




ѵаг із = { 




іе: 

паѵідаЕог. аррЫагпе = 

= 'МісгозоЕЕ ІпЕегпеЕ 

Ехріогег' , 

^ аѵа: 

паѵідаЕог. ^ аѵаЕпаЫесі () 

Г 


пз: 

паѵідаЕог. аррЫаше = 

= 'ЫеЕзсаре', 


иа: 

паѵідаЕог.изегАдепЕ 

.ЕоЬомегСазе() , 


ѵегзіоп: 

рагзеЕІоаЕ(паѵідаЕог.аррѴегзіоп.зиЪзЕг(21)) 

рагзеЕІоаЕ(паѵідаЕог.аррѴегзіоп), 


міп: 

паѵідаЕог.рІаЕЕогт == ' 

Иіп32 ' 



} 


із.тас = із . иа. іпсіехО і ( ' тас ' ) >= 0; 

іЕ (із.иа.іпДехОЕ('орега' ) >= 0) { 

із.іе = із.пз = Еаізе; 
із.орега = кгие; 

} 

іЕ (із.иа.іпбехОЕ('деско') >= 0) { 

із.іе = із.пз = Еаізе; 
із.деско = Егие; 

} 


Листинг 3.16. Сжатая копия кода листинга 3.15 


// Сжатый код 

ѵаг із={іе:паѵідаког.аррЛаше=='Місгозоік ІпЕегпеЕ Ехріогег',^аѵа: 
паѵідаЕог. ^ аѵаЕпаЫесі () , пз : паѵідаЕог. аррЛаше== ' ЫеЕзсаре ' , иа: 
паѵідаЕог.изегАдепЕ.ЕоЬоѵгегСазе(),ѵегзіоп:рагзеЕІоаЕ( 

паѵідаЕог.аррѴегзіоп.зиЪзЕг(21))||рагзеЕІоаЕ(паѵідаЕог.аррѴегзіоп), міп: 
паѵідаЕог. р1аЕЕогт== ' Иіп32 ' } із . шас=із . иа. іпбехОЕ ( ' шас ') >=0; ІЕ ( 
із.иа.іпсІехОЕ('орега')>=0){із.іе=із.пз=Еа1зе;із.орега=Егие;} 

ІЕ (із . иа. іпбехОЕ ( 'деско' ) >=0) {із.іе=із .пз=Еа1зе;із. деско=Егие; } 

Заметьте, что все пробелы и комментарии были удалены, что привело к существенному сокращению 
общего размера кода. 

Вероятно, ІБМІп является самой простой утилитой сжатия кода ІаѵаЗсгірі. Она отлично подходит в 
начальной стадии использования сжатия для вводимого в эксплуатацию кода. Но когда настанет необходимость в 
дальнейшей экономии трафика, вам потребуется перейти на использование Раскег, довольно сложной и мощной 
библиотеки сжатия ІаѵаБсгірі. 

Раскег 

Раскег является самой мощной из всех доступных систем сжатия ІаѵаБсгірі. В этой системе, разработанной 
Дином Эдвардсом (Эеап Есіѵѵагсіз), используется способ полного сокращения размера кода с его последующим 
развертыванием и выполнением на лету. Благодаря этой технологии, Раскег создает оптимально наименьший 
возможный размер кода. Его можно рассматривать как самораспаковывающийся 2ІР-файл для кода ІаѵаБсгірі. 
Интернет-версия сценария Раскег доступна по адресу: ИіірУ/сІеап.есіѵѵагсІБ.пате/раскег/. 

Сценарий Раскег слишком большой и сложный, поэтому пытаться создавать что-либо подобное своими 
силами я бы не советовал. К тому же сгенерированный код содержит пару сотен служебных байтов (чтобы 
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обеспечить самораспаковку), поэтому для использования со слишком коротким кодом эта система не подходит 
(для этого лучше подойдет ІЗМіп). Но для больших файлов она безусловно является идеальным вариантом. 
Листинг 3.17 показывает выдержку из самораспаковывающегося кода, сгенерированного сценарием Раскег. 

Листинг 3.17. Часть кода, сжатая с использованием Раскег 


еѵаі ( Іипскіоп (р,а,с,к,е,<і) {е= ^ипсЬіоп (с) {гекигп с.коЗкгіпд(Зб) }; іб (! ' ' . геріасе (/ л /, 

Зкгіпд) ) {ѵгііііе (с--) {сі [с. коЗкгіпд (а) ] =к [с] I | с. РоЗ'Ьгіпд (а) } к= [ ( кипскіоп (е) { гекигп 
сі [е] })]; е= ( кипскіоп () { гекигп '\\м+'}); с=1 }; иЬііе(с-- ) { іб (к [с]) {р=р.геріасе (пем 
КедЕхр('\\Ь'+е(с)+'\\Ь','д'), к [с])}}гебигп р}('и 1={5:2.1==\' к з 
г\ ', 1п: 2 . □ (),4:2.к==\ ' к\ ' , 3 : 2.1 .т () , п: 7 (2 .сі. о (р) ) I 7 (2 .сі) , ч : 2 . д==\ ' і\ ' } 1 . 

Ъ=1 .3.6 (\'Ь\')>=0;а(1.3.6(\'с\')>=0) {1.5=1.4 = 9; 1.с=е}а(1.3.6(\'8\') >=0 ) {1.5= 

1.4 = 9 ;1.8=е}',31,31, ' | із | паѵідаког | иа | пз | іе...; . 

Пользу от сжатия вашего кода, особенно если для этого используется сценарий Раскег, трудно 
переоценить. В зависимости от того, как написан код, зачастую удается уменьшить его размер более, чем на 50%, 
что с точки зрения ваших пользователей отразится в лучшую сторону по времени загрузки, а это должно быть 
одной из главный целей для любого приложения ІаѵаЗсгірІ. 

Распространение 

Финальный шаг ІаѵаЗсгірІ-разработки является необязательным и большей частью зависит от конкретной 
ситуации. Если вы создаете код для себя или для компании, то, скорее всего, вы его просто распространите среди 
других разработчиков или выложите его для использования на своем веб-сайте. 

Но если вы разработали интересный фрагмент кода и хотите, чтобы весь остальной мир распорядился им 
по своему усмотрению, то вам понадобится служба наподобие ІаѵаЗсгірІ АгсИіѵе ІМеІѵѵогк (15АІМ). Эта служба была 
основана несколькими РегІ-разработчиками, которым понравилось использовать функциональные возможности и 
практические преимущества архива СРАІМ (Сотргеііепзіѵе РегІ АгсИіѵе Иеіѵѵогк). Подробнее о 15АІМ можно узнать 
на веб-сайте Ы1р://ореп)5ап.огд/. 

Требования 15АІМ заключаются в том, чтобы все передаваемые в архив модули были написаны в 
безупречно отформатированном объектно-ориентированном стиле, соответствующим архитектуре конкретного 
модуля. Кроме того, что 15АІМ является центральным хранилищем кода, в нем имеются средства, пользуясь 
которыми можно импортировать требования о взаимозависимости вашего кода и внешних модулей 15АІМ. Они 
могут значительно упростить написание взаимосвязанных приложений, и избавиться от волнений на счет того, 
какие модули уже были установлены пользователем. Чтобы понять, как работает типичный модуль 15АІМ, 
рассмотрим один из простых модулей, ООМ.ІпзегІ, доступный по адресу: 
Ні1р://ореп)5ап.огд/<1ос/г/гк/гкіпуоп/ООМ/ІП5егі/О.С)2/ІіЬ/ООМ/ІП5ег1.І'і1:тІ. 

Этот модуль принимает строку НТМІ_ и вставляет ее в конкретное место веб-страницы. Кроме того, что он 
прекрасно объектно-ориентирован, он также требует для своей работы и загружает два других модуля 15АІМ, оба 
из которых показаны в листинге 3.18. 

Ызііпд 3-18. Пример модуля 15АІМ (ЭОМ.ІпвегІ:) 


// Мы пытаемся включить некоторые другие модули, используя ЦЗАЫ 


кгу { 
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// загрузка двух необходимых для работы библиотек БЗАИ 
БЗАЫ.изеі 'Сіазз' ) 

БЗАЫ . изе ( 'ВОМ.БбіІз' ) 

// если загрузка БЗАИ не состоялась, будет вызвано исключение 
} сабсЬ. (е) { 

ббгом "ВОМ.Іпзегб гедиігез БЗАИ бо Ье Іоабесі"; 

} 

// Проверка существования пространства имен БОМ 
іб ( буреоб БОМ == ' ипсіебіпесі ' ) 

БОМ = {}; 

// Создание нового конструктора ВОМ.Іпзегб, являющегося наследником объекта 
// 'ОЬ^есб' 

ВОМ.Іпзегб = Сіазз .сгеабе( 'БОМ. Іпзегб ', Об^есб, { 

// Конструктор, принимающий два аргумента 
іпібіаііге: бипсбіоп(еіешепб, сопбепб) { 

// Элемент, в который вставляется НТМЬ 
бЬіз . еіешепб = $ (еіешепб) ; 

// Вставляемая строка НТМЬ 
бЬіз .сопбепб = сопбепб; 

// Попытка вставки строки НТМЬ с использование способа, 

// предусмотренного в Іпбегпеб Ехріогег 

іб (бНіз.асіуасепсу && бПіз.еіешепб.іпзегбАбдасепбНТМЬ) { 

бЬіз . еіешепб . іпзегбАсІу асепбНТМЬ (бНіз . асі^ асепсу, бЫз . сопбепб) ; 

// при других обстоятельствах, попытка использовать способ, 

// предусмотренный в КЗС 
} еізе { 

бПіз.гапде = бЬіз.еіешепб. омпегВосшпепб .сгеабеВапде(); 
іб (бЬіз.іпібіаІігеВапде) бЬіз . іпібіаІігеВапде () ; 
бЬіз.бгадшепб = 

бЬіз . гапде . сгеабеСопбехбиаІЕгадшепб (бЬіз . сопбепб) ; 
бЬіз.іпзегбСопбепб(); 

} 

} 

}) ; 


Стремление иметь понятно написанный объектно-ориентированный легко встраиваемый код ІаѵаЗспрІ, 
должно стать критерием разработки как для вас самих, так и для любого другого разработчика. Именно это 
положение мы собираемся положить в основу изучения остальной части языка ІаѵаЗспрб Поскольку ІаѵаЗсгірі 
продолжает набирать силу, важность такого стиля разработки будет только усиливаться, он будет становиться все 
более полезным и распространенным. 


Выводы 
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В этой главе мы рассмотрели различные способы построения структур кода, предназначенного для 
широкого применения. Используя объектно-ориентированные технологии, изученные в предыдущей главе, мы 
смогли применить их для создания четких структур данных, хорошо вписывающихся в среду коллективной 
разработки. В дополнение к этому мы рассмотрели наилучшие способы создания поддерживаемого кода, 
сокращения размера файла ^ѵаЗсгірІ, и создания пакета кода для его распространения. Знания о том, как 
создается отлично отформатированный, удобный в сопровождении код, уберегут вас от бесконечных часов 
разочарований. 
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Глава 4 Инструменты для отладки и тестирования 

При разработке программ на любом языке программирования больше всего времени уходит, наверное, на 
тестирование и отладку кода. Когда ведется разработка программного кода профессионального уровня, гарантия 
того, что вы создаете полностью протестированный, поддающийся проверке и свободный от ошибок код, 
становится особенно актуальной. Есть одна особенность, определяющая существенное отличие ^ѵаЗсгірі от 
других языков программирования: у него нет владельца или поддержки со стороны какой-либо компании или 
организации (в отличие от С#, РНР, РегІ, РуШоп или ^ѵа). Эта особенность может вызвать затруднения в 
получении соответствующей базы для тестирования и отладки вашего кода. 

Чтобы сберечь нервы и сократить объем работы, затрачиваемый на отлавливание ошибок в коде 
^ѵаЗсгірі, может пригодиться любое из существующих мощных средств разработки. Подобные инструменты 
(правда, различного качества) есть у каждого современного браузера. Их применение превращает разработку на 
^ѵаЗсгірІ в более стройный и многообещающий процесс. 

В этой главе будут рассмотрены различные инструменты, пригодные для отладки кода ]аѵа5сгір(:, а также 
вопрос создания многократно используемых, надежных тестовых комплектов, пригодных для проверок не только 
существующих, но и будущих разработок. 

Отладка 

Тестирование и отладка всегда идут рука об руку. Устраивая коду всесторонние испытания, вы наверняка 
столкнетесь с невыловленными ошибками, требующими особого внимания. И тут наступает процесс отладки. 
Освоив лучшие из доступных инструментальных средств, и научившись искать и устранять ошибки в коде, вы 
сможете гарантировать его качество и ускорить свою работу 

Консоль ошибок 

Самый доступный инструмент, имеющийся в том или ином виде во всех современных браузерах — это 
консоль ошибок. Каждый браузер может предложить консоль определенного качества, со своей степенью 
доступности интерфейса и ценностью сообщений об ошибках. В конечном итоге вы сами придете к решению, 
какой из браузеров больше подходит для начала процесса отладки, чья консоль ошибок (или другие отладочные 
расширения) окажутся наиболее подходящими для разработчиков. 

Іпіегпеі Ехріогег 

Популярность браузера не предполагает, что он, соответственно этому качеству, имеет лучший 
инструментарий для отладки. К сожалению, консоль ошибок Іпіегпеі: Ехріогег оставляет желать лучшего. Кроме 
всего прочего, эта консоль по умолчанию отключена, что еще больше запутывает охоту за ошибками, если только 
вы не используете Іпііегпеі: Ехріогег в качестве своего заданного по умолчанию браузера (вообще-то очень 
сомнительно, чтобы любой, уважающий себя ^ѵа5сгір1:-разработчик использовал бы его в этом качестве). 

Кроме вышеупомянутого неудобства использования, у консоли ошибок Іпіегпеі: Ехріогег есть и более 
существенные проблемы: 

• Он выводит сообщение только об одной ошибке; чтобы найти сообщения о других ошибках, нужно 
перейти на них, воспользовавшись системой меню. 

• Сообщения об ошибках изложены непонятно, и их логический смысл едва уловим. Точные описания 
возникших проблем появляются в них крайне редко. 

• Строка, содержащей ошибку, всегда указывается со смещением на единицу, т.е. настоящая строка с 
ошибкой имеет номер на единицу меньше, чем указанная. Если учесть еще и невнятность текста 
сообщения об ошибке, то вы должны обладать качеством настоящего охотника за ошибками. 
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Пример сообщения об ошибке, появляющегося в консоли ошибок Іпіегпеі Ехріогег, показан на рис. 4.1. 


'Э Іпіегпеі Ехріогег 
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Рис. 4.1. Консоль ошибок ІаѵаЗсгірІ в Іпіегпеі; Ехріогег 

Как уже упоминалось в начале этого раздела, лучше для начала процесса отладки кода ІаѵаЗсгірІ 
воспользоваться другим браузером (а не Іпіегпеі Ехріогег). Но если вы все же устранили все ошибки, пользуясь 
этим браузером, значит, у вас было достаточно времени, чтобы разобраться со всеми странностями Іпіегпеі 
Ехріогег. 

Ріге^ох 

За последние два года пользовательский интерфейс веб-браузера РігеІох был существенно улучшен, 
значительно упростив для веб-разработчиков создание более качественных веб-сайтов. Консоль ошибок 
ІаѵаЗсгірІ претерпела ряд переработок, превратившись в очень полезный инструмент. В консоли ошибок РігеІох 
заслуживают внимания следующие особенности: 

• Консоль позволяет вводить произвольные команды ІаѵаЗсгірІ. Это особенно удобно для определения, 
какое значение имеет та или иная переменная после загрузки страницы. 

• Консоль позволяет проводить сортировку сообщений по их типу, к примеру, ошибки, предупреждения или 
простые сообщения. 

• Самая последняя версия консоли предоставляет наряду с ошибками ІаѵаЗсгірІ дополнительные 
предупреждения, касающиеся ошибок или неувязок с таблицами стилей. Ріа неудачно спроектированных 
веб-сайтах эта особенность может вызвать целый поток ошибок, но в целом она очень полезна для 
самостоятельного поиска нетипичных ошибок формата. 

• РІедостаток консоли в том, что она не фильтрует ошибки, чтобы выделить из них те, которые относятся к 
просматриваемой в данный момент странице, т.е. вы получаете вперемешку ошибки с разных страниц. 
(Расширение ЕігеЬид, которое я буду рассматривать в следующем разделе, поможет решить эту проблему.) 

Копия экрана консоли ошибок РігеІох показана на рис. 4.2. Обратите внимание на кнопки, которые можно 
использовать, чтобы переключаться между различными типами сообщений. 
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Рис. 4.2. Консоль ошибок ІаѵаБсгірі: в Рігеіох 

Консоль ошибок РігеГох достаточно хороша, но не совершенна. Поэтому для более успешной отладки своих 
приложений разработчики стремятся воспользоваться различными расширениями Рігеіох. Некоторые из этих 
расширении будут рассмотрены далее в этом разделе. 

ЗаГагі 

Браузер ЗаГагі один из самых новых на рынке, и один из самых быстроразвивающихся. В процессе этого 
развития поддержка ІаѵаБсгірі (как в разработке, так и в исполнении кода) была временами довольно 
неустойчивой. Из-за этого доступ к консоли ІаѵаБсгірі внутри браузера несколько затруднен. Консоль даже не 
включена в свойства, которые можно просто активировать. Она полностью скрыта в секретном меню отладки, 
недоступном для обычного пользователя. 

Чтобы активировать меню отладки (а вместе с ним и консоль ІаѵаБсгірі) нужно в командной строке 
запустить команду, показанную в листинге 4.1 (при неработающем Баіагі). 

Листинг 4.1. Команда, предписывающая Баіагі показать меню отладки 

сіе^ацІСз мгіСе сот. арріе . Забагі ІпсІисІеВеЪидМепи 1 

При следующем запуске ЗаГагі у вас появится новый пункт меню отладки, в который будет включена 
консоль ІаѵаЗсгірІ. 

Скрытность расположения дает понять, что консоль на данный момент не в лучшей форме. О ней можно 
сказать лишь следующее: 


Сообщения об ошибках часто носят невнятный характер, и по качеству находятся практически на том же 
уровне, что и сообщения об ошибках в Іпіегпеі: Ехріогег. 

Номера ошибочных строк присутствуют, но часто сбрасываются в ноль, заставляя начинать все сначала. 
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• Фильтрация сообщений об ошибках по страницам отсутствует, но у каждого сообщения есть сценарий, 
выдавший эту ошибку, ссылка на который дается сразу за ее описанием. 

Копия экрана консоли ошибок, запущенной в ЗаГагі 2.0, показан на рис. 4.3. 
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Рис. 4.3. Консоль ошибок ^ѵаБсгір): в БаРагі 

Браузер БаГагі еще очень далек от того, чтобы стать платформой для веб-разработок. Тем не менее 
команда разработки ѴѴеЬКіІ: (создающая для БаГагі движок формирования изображения) неплохо продвинулась в 
своей работе, улучшив скоростные параметры браузера. Поэтому в ближайшие месяцы и годы стоит ожидать 
появления для этого браузера новых успешных разработок. 

Орега 

Последняя консоль ошибок, которую мы собираемся рассмотреть, принадлежит браузеру Орега. К нашему 
всеобщему удовольствию, разработчики Орега тратят много времени и усилий, чтобы превратить этот браузер в 
исключительно функциональный и полезный продукт. Вдобавок ко всем свойствам, доступным в консоли ошибок 
РігеГох, в нем имеется следующее: 

• Хорошее описание ошибок, позволяющее разобраться в сути проблемы. 

• Встроенные фрагменты кода, показывающие, в каком месте допущена ошибка. 

• Возможность отфильтровать ошибки по типам (например, ^ѵаЗсгірІ:, СБ5 и т.д.). 

К сожалению, консоль не имеет возможности выполнения команд ^ѵаБсгірІ:, а жаль, поскольку эта 
функция могла бы очень пригодиться. Но все-таки в итоге мы получаем превосходную консоль ошибок. На рис. 
4.4 показана копия экрана консоли в Орега 9.0. 
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Рис. 4.4. Консоль ошибок ^ѵаЗсгірІ: в Орега 

Орега давно относится к веб-разработке со всей серьезностью. 

Позиция команды, состоящей из большого количества активных, энергичных разработчиков и 
составителей технических условий, всегда заключалась в стремлении учесть интересы веб-разработчиков. 

Далее я вам покажу ряд связанных с ^ѵаЗсгірЕ расширений браузеров, обладающих довольно мощными 
возможностями, значительно повышающими производительность разработки. 

Инспекторы йОМ 

Инспектирование йОМ — одна из самых полезных, но недостаточно используемых операций, доступных 
веб-разработчику. Ее можно рассматривать как расширенную версию просмотра исходного кода веб-страницы, 
позволяющую вам увидеть текущее состояние страницы, после того, как ваш код уже изменил ее содержимое. 

Разные ООМ-инспекторы на каждом браузере работают по-разному, некоторые предоставляют 
дополнительные функциональные возможности, позволяющие вам глубже понять, с чем вы работаете. В этом 
разделе я собираюсь рассмотреть три инспектора, и те особенности, которые отличают их друг от друга. 

Инспектор ЭОМ, имеющийся в РігеГох 

РігеГох ООМ-инспектор является расширением браузера, который поставляется в предупакованном виде с 
каждой установкой РігеГох (но в установщике он по умолчанию отключен). Это расширение позволяет 
перемещаться по уже построенному и управляемому РИМЬ-документу. Копия экрана этого расширения показана 
на рис. 4.5. 
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Рис. 4.5. Встроенный в РігеГох БОМ-инспектор 


При переходе по документу можно не только видеть структуру измененных НТМІ_-элементов, но и каждое 
стилевое свойство элемента, наряду с его физическими, объектными свойствами. Это поможет вам точно узнать, 
как именно выглядит веб-страница после ее модификации. В результате вы получаете крайне нужный инструмент. 

ООМ-инспектор, имеющийся в 5а?агі 

Браузер ЗаГагі имеет новый йОМ-инспектор, включаемый в его последние сборки. По некоторым 
показателям он превосходит ЭОМ-инспектор, имеющийся в РігеГох, вы можете щелкнуть правой кнопкой мыши на 
любом элементе страницы и немедленно перейти на него в инспекторе. Копия экрана весьма изящно построенного 
ООИ-инспектора ЗаГагі показана на рис. 4.6. 
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Рис. 4.6. ООМ-инспектор, встроенный в 5аЕагі 

Хотя это расширение включено в последние сборки БаГагі, но сделать его доступным еще более сложно, 
чем вышеупомянутую консоль ЗаѵаЗсгірЕ. Поразительно, как это команда 5аЕагі предприняла столько усилий для 
создания и добавления этих компонентов, а затем скрыла их от разработчиков, желающих их использовать. И так, 
для активации ООМ-инспектора вы должны запустить команду, показанную в листинге 4.2. 

Листинг 4.2. ЕпаЫіпд ГГіе БаГагі ООМ ІпзресГог 

сіебаиібз ѵѵгібе сот. арріе . Забагі ИеЬКіСВеѵеІорегЕхбгаз -Ъооі Сгие 

БаГагі ООМ-инспектор имеет довольно большой потенциал для роста и совершенствования, что само по 
себе хорошо, учитывая талант, проявляемый командой его разработчиков. Но в данный момент для начала работы 
в качестве базового инструмента лучше использовать РігеГох, пока БаГагі не будет полностью доработан и 
выпущен в надлежащем виде. 

Наглядное представление источника 

И, наконец, я хочу представить самый понятный из всех доступных веб-разработчикам ООМ-инспектор. 
Расширение РігеГох, названное Ѵіеѵѵ Репйегей 5оигсе[1] (отображение структурной диаграммы), предоставляет 
дополнительный элемент меню, расположенный рядом с обычным элементом Ѵіеѵѵ Боигсе (Просмотр исходного 
кода страницы), который дает вам выход на полный образ нового НТМІ_-документа, представленный в интуитивно 
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понятном и доступном виде. Более подробные сведения об этом расширении можно найти на посвященном ему 
веб-сайте: біфѴ^еппіГегтасІсіеп.сот/зсгірІіз/ѴіеѵѵРІепсІегесІЗоигсе.І'іІгтІ. 

Вдобавок к предоставлению образа исходного кода, который выглядит очень естественно, этот инструмент 
дает для каждого уровня документа раскраску, соответствующую его положению в общей иерархии, улучшая 
ваше представление о том, в каком именно месте кода вы находитесь (см. рис. 4.7). 


<Ьосіу> 

<сііѵ> 

<ѣаЫе> 

<іЬосіу> 

<1;г> 

<Ы> 

<Ыоскдиоіе> 

<зрап> 

<и1> 

<1і> 

<Р> 

</р> 

</1і> 

</и1> 

</зрап> 

</ЫоскдиоФе> 

</ѣсІ> 

</1:г> 

</ФЬосіу> 

</іаЫе> 

</сііѵ> 


Рис. 4.7. Расширение Ѵіеѵѵ Репсіегес) Зоигсе, разработанное для РігеГох 

Расширение Ѵіеѵѵ Репбегесі Зоигсе должно стать стандартом для любого набора инструментов веб- 
разработчика; его практичность намного превосходит все, что может дать основной пункт меню Ѵіеѵѵ Зоигсе 
(Просмотр исходного кода страницы), и позволяет плавно перейти к более сложному расширению Рігебэх — БОМ- 
инспектору. 

РігеЬид 

РігеЬид — одно из самых важных из появившихся недавно расширений, предназначенных для разработки 
на ^ѵаЗсгірІ. Это расширение, созданное Джо Хьюиттом ^ое РіеѵѵіЩ, служит в качестве полного пакета для 
^ѵаЗсгірІ-разработчика. В его состав входит консоль ошибок, отладчик и БОМ-инспектор. Более подробная 
информация об этом расширении может быть найдена на посвященном ему веб-сайте: 
ЬИрѴ/ѵѵѵѵѵѵдоеИеѵѵіІЬ.сот/воЛѵѵагеДігеЬид/. 
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Главное преимущество такого обилия интегрированных в единое целое инструментов состоит в том, что вы 
получаете более конкретное представление о причине возникновения проблемы. К примеру, по щелчку на 
сообщении об ошибке вы получаете файл ^ѵаЗсгірІ и строку, в которой произошла ошибка. Здесь вы можете 
установить контрольные точки останова программы, которые могут использоваться, для пошагового выполнения 
сценария, и получения лучшего представления, о том, где возникает ошибка. Копия экрана этого расширения 
показана на рис. 4.8. 
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Рис. 4.8. Отладочное расширение ГігеЬид 

Пока из современных инструментов еще не появилось ничего лучшего, чем ГігеЬид. Я настоятельно 
рекомендую выбрать РігеРох в сочетании с расширением РігеЬид в качестве базовой платформы для 
программирования на ^ѵаЗсгірС 

Ѵепктап 

Последним элементом, завершающим составление нашего пазла расширений для разработки на ^ѵаЗсгірІ:, 
будет расширение Ѵепктап. Созданное как часть браузера МоііІІа, Ѵепктап является условным названием для 
проекта отладочного инструмента ^ѵаЗсгірІ:, запущенного разработчиками МогіІІа. Более подробная информация 
об этом проекте и обновленном расширении для РігеГох может быть найдена на следующих веб-сайтах: 

• Проекта МоііІІа Ѵепктап: Ігир://ѵѵ\л/ѵѵ.то2ІІІа.огд/рго]ес1:5/ѵепктап/ 

• Ѵепктап для РігеРох: Гііііірз://асІсіоп5.то^ііІа.огд/ГігеГох/216/ 

• Руководства по Ѵепктап: бир://ѵѵѵѵѵѵ.то2ІІІа.огд/рго]ес1:5/ѵепктап/ѵепктап-ѵѵаІк1:ІпгоидІт.Іі(:тІ 

Важность использования подобного расширения по сравнению с расширением РігеЬид состоят в том, что 
благодаря его глубокой интеграции в сам движок ^ѵаЗсгір!:, появляется возможность предоставить 
дополнительные средства управления тем, что именно делает ваш код. Копия экрана расширения Ѵепктап для 
РігеГох показана на рис. 4.9. 
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Рис. 4.9. Имеющее давнюю историю расширение Ѵепктап ^ѵаЗсгірі сіеЬиддег, перенесенное на РігеГох 

Используя все дополнительные средства управления, представленные этим расширением, вы можете точно 
узнать, какая переменная доступна в конкретной области видимости, а также получить достоверную информацию 
о состоянии свойств или переменных, и дополнительно к этому получить возможность пошагового выполнения 
кода и анализа хода его выполнения. 


Тестирование 

Лично я рассматриваю тестирование кода и создание тестовых примеров как «проверку на будущее». 
Создавая близкие к реальности тестовые примеры для основного кода или библиотек, вы сможете сэкономить 
массу времени на отладке, которое обычно тратится на поиск какой-нибудь загадочной ошибки, или, что еще 
хуже, на невольное внесение в свой код новых ошибок. 

Располагая внушительным набором тестовых примеров, что является устоявшейся практикой большинства 
современных систем программирования, вы сможете оказать помощь не только себе самому, но всем остальным, 
кто использует вашу программную основу, добавляя к ней новые возможности и устраняя ошибки. 

В этом разделе я представлю вам три различные библиотеки, которые могут быть использованы для 
построения наборов тестовых примеров ^ѵаЗсгірІ:, каждый из которых может быть выполнен кроссбраузерным 
автоматизированным способом. 

.351ІПІІ 

Библиотека ^ІІпіІ долгое время была чем-то вроде золотого стандарта для блочного тестирования 
^ѵаЗсгірІ:. Большая часть ее функциональных возможностей основана на популярном пакете ЛІпФ для ^ѵа, что 
означает ее легкое освоение при условии, что вы знаете, как ЛІпіІ работает с ^ѵа. На посвященном этой 
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библиотеке веб-сайте ННрѴ/ѵѵѵѵѵѵдзипіІі.пеІ:/, имеется масса информации и документации 
(НіфѴ/ѵѵѵѵѵѵдзипіі.пеІі/сІоситепІіаІііоп/). 

Как и большинство других комплексов для блочного тестирования (или по крайней мере те из них, что 
рассматриваются в этом разделе), этот комплекс содержит три основных компонента: 

Прогонщик теста : Эта часть комплекса предоставляет красочное графическое отображение, 
показывающее насколько далеко продвинулся тест по сравнению с полным прогоном. Она дает возможность 
загружать тестовые наборы и выполнять их содержимое, регистрируя все предоставляемые ими выходные 
данные. 

Тестовый набор: Это коллекция тестовых примеров (иногда разбитых на несколько веб-страниц). 

Тестовые примеры: Это отдельные команды, которые вычисляются в простые выражения типа ігие/ГаІ5е, 
тем самым предоставляя вам поддающиеся оценке результаты, позволяющие определить правильность работы 
вашего кода. По отдельности тестовые примеры могут и не быть полезными, но при их совместном использовании 
в прогонщике теста, вы можете извлечь выгоду от их взаимодействия. 

Все это вместе взятое создает полноценный автоматизированный тестовый комплекс, который может быть 
использован для запуска и добавления дальнейших тестов. Пример простого тестового комплекса показан в 
листинге 4.3, а набор тестовых примеров показан в листинге 4.4. 

Листинг 4.3. Тестовый комплекс, построенный с использованием І51ІПІ1: 


<ЬСт1> 

<Ьеа<3> 

^ЮеХзИпИ: ТезС 5иіСе</Сі'Ые> 

<зсгірС згс="../арр/) зЛпіССоге .)з"></ зсгірО 
<зсгірО 

ТипсСіоп зиіТе() { 

ѵаг пемзиіСе = пем Сор . ) зОпіСТезТЗиіТе () ; 
пемзиіСе . асМТезТРаде (") зЛпіСТезТз . ЪСтІ") ; 
геСигп пемзиіТе; 

} 

</зсгірО 
</Ьеа<3> 

<Ьо<ЗуХ/Ьо<Зу> 

</ЬСш1> 

Листинг 4.4. Различные тестовые примеры, которые могут быть использованы в типичной тестовой 
странице 


<ЬСт1> 

<Ьеа<3> 

<Сі1;1е>ТзипіС АззегСіоп ТезСз</ТіС1е> 

<зсгірС згс="../арр/)зЦпіССоге.)з"></зсгірО 
<зсгірО 

// тестирование выражения на истинность (Сгие) 
ТипсСіоп СезСАззегСТгие() { 

аззегСТгие ( "Сгие зЬоиІсі Ье Сгие", Сгие) ; 
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аззегЬТгие (Ьгие) ; 

} 

// Тестирование выражения на ложность (Ьаізе) 

ЕипсЫоп ЬезЬАззегЬЕаІзе () { 

аззегЬЕаІзе ( "Ьаізе зЬоиІсІ Ье Ьаізе", Ьаізе); 
аззегЬЕаІзе (Еаізе) ; 

} 

// Тестирование двух аргументов на равенство друг другу 
ЕипсЫоп ЬезЬАззегЬЕдиаІз() { 

аззегЕЕриаІз (" 1 зЬоиІсІ ериаі 1", 1, 1); 
аззегЕЕриаІз (1, 1); 

} 

// Тестирование двух аргументов на неравенство друг другу 
ЬипсЫоп ЬезЬАззегЫ\ІоЬЕдиа1з() { 

аззегЫ\ІоЬЕдиа1з (" 1 зЬоиІсІ поЬ еяиаі 2", 1, 2); 
аззегЫ\ІоЬЕдиа1з (1, 2); 

} 

// Тестирование аргумента на равенство нулевому значению (пиіі) 
ЕипсЫоп ЬезЬАззегЫІиІІ() { 

аззегЬЕІиІІ ("пиіі зЬоиІсІ Ье пиіі", пиіі); 
аззегЬЫиІІ(пиіі); 

} 

// на неравенство нулевому значению (пиіі) 

ЕипсЫоп ЬезЬАззегЫ\ІоЫІи11 () { 

аззегЫІоЬЕІиІІ (" 1 зЬоиІсІ поЬ Ье пиіі", 1) ; 
аззегЬЫоЬЫиИ (1) ; 

} 

// и еще многое-многое другое 
</зсгірЬ> 

</ЬеаЬ> 

<ЬоЬу></ЬоЬу> 

</ЬЬш1> 


По ]51ІпіІ: есть довольно неплохая документация, а поскольку эта библиотека существует уже достаточно 
долгое время, то вы, скорее всего, сможете найти хорошие примеры ее использования. 

ЗЗИпЛ 

Библиотека ІЗІІпіі — новичок в мире блочного тестирования ІаѵаЗсгірі. Она превосходит 151ІПІІ: в том, что 
может быть непосредственно интегрирована с комплексом тестирования на стороне сервера, к примеру, с ЛІпіІ 
или ІеНу. Эта библиотека может быть очень полезна для Іаѵа-разработчиков, потому что они могут быстро 
прогнать все свои тестовые примеры для кода как на клиентской, так и на серверной стороне. Но, поскольку не 
все работают с Іаѵа, ЗЗІІп И; также предоставляет статический режим, который может быть исполнен на вашем 



73 


браузере, так же как и любые другие библиотеки блочного тестирования. Более подробные сведения о ]311пі(: 
можно найти на веб-сайте, посвященном этой библиотеке: ИйрѴ^ЗипіЬзоигсеГогде.пеІ:/. 

Поскольку связка тестовых примеров на стороне клиента с кодом на стороне сервера является довольно 
редким режимом работы этой библиотеки, давайте посмотрим, как в ЗЗиіп И: работают статические блочные тесты 
на стороне клиента. К нашему всеобщему удовольствию, они ведут себя практически также, как и другие 
тестовые комплекты, позволяя легко переключиться на работу с этой библиотекой, что становится понятным из 
просмотра кода листинга 4.5. 

Листинг 4.5. Простой тест, выполняемый с помощью ^ІІпіІ: 


<Ы:ш1> 

<ЬеасІ> 

<ЬіЫе>Затр1е ТезЬ</ЫЫе> 

<зсгірб 5 г с— " дз/ипіЫлезб.дз" Ьуре="Ьехб/ д аѵазсгірб"></зсгірО 
<зсгірб згс="□ з/ зиібегиппег . д з" Ьуре^'ЬехЬ/д аѵазсгірСХ/зсгірО 
</Ьеа<3> 

<ЪосІу> 

<р і<і="Ьі'Ые">Затр1е ТезЬ</р> 

<зсгірб Ьуре="Ьех1:/д аѵазсгірЬ"> 
пем ТезЬ.ЛпИ:.Киппег({ 

// Тестирование невидимого и видимого режимов отображения элемента 
ЬезЬТоддІе : бипсбіоп () {міръ. (Шз) { 

ѵаг ЬіЫе = сІоситепЬ . деЬЕІетепЬВуІсІ ("ЬіЫе") ; 

ЫЫе . збуіе . Ызріау = ' попе ' ; 

аззегЬЛоЬѴізіЫе (ЬіЫе, "ЬіЫе зЬоиІсІ Ье іпѵізіЫе"); 

еіешепб . збуіе . сіізріау = 'Ыоск'; 

аззегЬѴізіЫе (ЫЫе, "ЬіЫе зЬоиІсІ Ье ѵізіЫе"); 


// Тестирование добавления одного элемента к другому 
ЬезЬАррепсі: бипсбіоп () {міЫт(Ытіз) { 

ѵаг ЬіЫе = ЬосишепЬ . деЬЕІешепЬВуІсі ("ЬіЫе") ; 
ѵаг р = ЬосишепЬ.сгеабеЕІешепб("р"); 

ЬіЫе . аррепсІСМІсІ ( р ); 
аззегЬЛоЬЛиІІ ( ЫЫе . ІазЬСЬіІсІ ); 
аззегЬЕдиаІ ( ЫЫе . ІазЬСЬіІсІ, р ); 

} } 

}) ; 

</зсгірО 
</Ьо<Зу> 

</Ы;т1> 

Хотя ЗЗиіпИ: относительно новая библиотека, она подает множество надежд для развития среды блочного 
тестирования. Если вас заинтересовал ее объектно-ориентированный стиль, я советую к ней присмотреться. 


Те5і.5ітрІе 
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Последним примером блочного тестирования іаѵаБсгірі служит еще один новичок. Библиотека Тезі.БітрІе 
была представлена одновременно с созданием І5АЫ в качестве способа определения общих стандартов 
тестирования всех представленных там модулей ]аѵа5сгір1:. Поскольку Те5(;.5ітрІе получила широкое 
распространение, у нее имеется обширная документация и множество примеров использования, что в 
совокупности является весьма важным аспектом использования среды тестирования. Более подробные сведения о 
Тезі.БітрІе (и сопутствующей ей библиотеке Тез):.Моге) могут быть найдены в следующих источниках: 

• Тезі.БітрІе: ЬіірѴ/оре^зап.огд/сІос/ІіАІ'іЛЬеогу/ТезІі/БітрІе/ 

• Документация по Те5б5ітрІе: Иіф://ореп]5ап.огд/босЛ/1:іу№еогу/Те5і/5ітрІе/0.21/ІіЬ/Те5І:/5ігпрІе.|-|1:тІ 

• Документация по Тег):.Моге: М1:1:р://орепдзап. огд/с1ос/1:/Ып/1:Іпеогу/Те5І:/5ітрІе/0 .21/1 іЬ/ТезІі/Моге.И1;тІ 

Библиотека Те5І.5ітрІе предоставляет обширный арсенал методов тестирования наряду с полноценным 
прогонщиком тестов, обеспечивающим их автоматизированное выполнение. Пример типового теста ТеБІ.ЗітрІе 
показан в листинге 4.6. 

Листинг 4.6. Использование ТезбБітрІе и Тезі.Моге для выполнения тестов 

// Загрузка модуля Тезб Моге (для самотестирования!) 
пей ЦЗАЛ('.. /ІіЬ '). изе ('Тезб.Моге'); 


// Планирование проведения шести тестов (чтобы определить все недочеты) 
ріап ({безбз: 6}); 

// Тестирование трех простых примеров 
ок( 2 == 2, 'бмо із био із био із био' ); 

із ( "боо", "боо", 'боо із боо' ); 
ізпб ( "боо", "Ъаг", 'боо ізпб Ьаг'); 

// Тестирование с использованием регулярных выражений 
Ііке ("бооЫе" , / л боо/, 'боо із Ііке бооЫе ' ) ; 

Ііке ( "ЕооВІе" , /боо/і, 'боо із Ііке ЕооВІе'); 

Ііке("/изг/іосаі/", ' л \/изг\/Іосаі', 'гедехез иібб зіазбез іп Ііке' ); 

Мне лично нравится легкость использования библиотек ТезбБітрІе и Тезі.Моге, поскольку они не 
доставляют больших хлопот и помогают поддерживать простоту вашего кода. В конечном счете вам решать, какой 
из тестовых комплексов лучше подойдет, поскольку подбор такого комплекса для кода — очень важный вопрос, 
который нельзя обойти стороной. 

Вывод 

Возможно, весь представленный в этой главе материал не стал особым откровением для искушенных 
опытом программистов, но объединение всех рассмотренных понятий применительно к ИаѵаЗсгірб, в конечном 
итоге будет способствовать простоте и удобству использования этого языка, и его росту в качестве 
профессионального языка программирования. Я настоятельно рекомендую, чтобы вы ввели в практику своих 
разработок процесс отладки и тестирования. Я уверен, что только он позволит вам создавать более качественный 
и свободный от ошибок код іаѵаБсгірІ:. 
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[1] Теперь это расширение называется Ѵіеѵѵ Боигсе СІтагІ; (прим, переводчика ) 
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Глава 5 Объектная модель документа 

Из всех достижений, произошедших за последнее десятилетие в веб-разработке, написание сценариев с 
использованием объектной модели документа — ООМ (Ооситепі: ОЬ^есІ: Мосіеі) стало, пожалуй, наиболее важной 
технологией, которой может воспользоваться веб-разработчик для улучшения впечатлений пользователей от 
своей работы. 

Использование ООМ в написании сценариев для добавления к странице ненавязчивого кода ^ѵаЗсгірІ: (что 
означает его невмешательство в работу браузеров, не поддерживающих ]аѵа5сгір(;, или с отключенной 
пользователем поддержкой) дает возможность предоставления весь спектр современных усовершенствований, 
готовых порадовать ваших пользователей, не досаждая тем из них, кто ими не пользуется. Дополнительный 
эффект, возникший благодаря использованию ООМ-сценариев проявился в том, что весь ваш код получил четкое 
разделение на объекты, которыми стало легче управлять. 

К нашему всеобщему удовлетворению, все современные браузеры поддерживают ООМ, а также 
дополнительно поддерживают встроенное ООМ-представление текущего НТМІ_-документа. Ко всем объекта 
имеется свободный доступ из кода ^ѵаЗсгірІ:, что во многом способствует работе современных веб-разработчиков. 
Умение пользоваться этой технологией и знание самых эффективных приемов ее использования может дать 
основной толчок к созданию вашего следующего веб-приложения. 

В этой главе мы рассмотрим ряд тем, связанных с ООМ. Предполагая, что некоторые читатели не знакомы 
с этой моделью, я начну с ее основ, и проведу вас по всем самым важным понятиям. А для тех, кто уже знаком с 
моделью ООМ, я обещаю показать несколько очень эффективных технологических приемов, которым, как я 
уверен, вы несомненно обрадуетесь, и начнете их использовать на собственных веб-страницах. 

Введение в объектную модель документа 

Модель ООМ является стандартным способом представления ХМІ_-документов (введенным организацией 
ѴѴЗС). Она, конечно, не является самой быстродействующей, простой и легкой в использовании, но зато она самая 
распространенная, и ее реализация существует во многих языках программирования, используемых для веб¬ 
разработки (среди которых Заѵа, РегІ, РНР, РиЬу, РуіНоп и ЗаѵаЗсгірІ;). ООМ создавалась с целью предоставить 
разработчикам интуитивно понятный способ перехода по иерархии ХМІ_-доку мента. Даже если вы не вполне 
знакомы с ХМЦ для вас будет очень радостной вестью, что все НТМІ_-документы (которые с точки зрения 
браузеров являются документами ХМІ_) имеют готовое к использованию ООМ-представление. 

Переходы по йОМ 

Способом представления в ООМ структуры ХМІ., является дерево, по которому можно осуществлять 
переходы. Вся используемая терминология позаимствована у генеалогического дерева (родители, дети, родные 
сестры и т.д.). В отличие от обычного семейного дерева, все ХМІ_-документы начинаются с одного корневого узла 
(который называется элементом сіоситепі), в котором содержатся указатели на его детей. Каждый дочерний узел 
имеет в свою очередь обратный указатель на своего родителя, на своих собратьев по уровню и на свои 
собственные дочерние элементы. 

Для ссылки на различные объекты дерева ХМІ., в ООМ используется специальная терминология. Каждый 
объект дерева ООМ является узлом. Каждый узел может иметь различный тип, например, элемент, текст или 
документ. Чтобы продолжить нашу учебу, нам нужно знать, как выглядит документ, отвечающий модели ООМ, и 
как по нему осуществлять переходы после того, как он будет выстроен. Давайте исследуем работу подобного 
ООМ-построения, рассмотрев простой фрагмент НТМЬкода: 


<р><5'Ьгопд>Не11о</з1;гопд> Ьом аге уои сІоіпд?</р> 
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Каждая часть этого фрагмента разбивается на ООМ-узлы, имеющие указатели от каждого узла на его 
прямых родственников (родителей, детей, сестер). Если вам понадобилось бы составить полную схему 
существующих родственных отношений, то она бы выглядела, как показано на рис. 5.1. Каждая часть фрагмента 
(прямоугольники со скругленными углами представляют элементы, а правильные прямоугольники — текстовые 
узлы) отображена вместе со всеми доступными ссылками. 



Рис. 5.1. Родственные связи между узлами 

Каждый отдельно взятый йОМ-узел содержит семейство указателей, которые могут использоваться для 
ссылок на родственные ему узлы. Воспользуемся этими указателями для освоения перемещений по ООМ. На 
рис. 5.2. показаны все доступные указатели. Каждое из этих свойств, доступное на каждом узле ООМ, является 
указателем на другой йОМ-элемент (или содержит значение пиІІ, если элемент не существует). 
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рагепМогіе 



Рис. 5.2. Перемещение по дереву ООМ с использованием указателей 

Используя только различные указатели, можно перемещаться к любому элементу или текстовому блоку на 
странице. Лучше всего понять, как это будет работать на практике, рассмотрев обычную НТМІ_-страницу, 
показанную в листинге 5.1. 

Листинг 5.1. Простая веб-страница НТМЬ, являющаяся двойником простого ХМІ_-документа 


<Ы:ш1> 

<ЬеасІ> 

<бі'1;1е>Введение в ВОМ</біб1е> 

</ЬеасІ> 

<ЪосІу> 

<Ы>Введение в ВОМ</Ы> 

<р с1аз5="'Ье5'С">Есть ряд причин, по которым БОМ - явление удивительное, 
и вот некоторые из них:</р> 

<и1> 

<1і ісі="еѵегум]теге">Ее можно найти повсюду. </1і> 

<1І с1азз="Сез'Ь">Ею легко пользоваться . </1і> 

<1І с1азз="'Ьез'1:">0на помогает найти все, что нужно, причем 
сделать это довольно быстро. </1і> 

</иі> 

</ЪосІу> 

</Ы:т1> 

В примере документа корневым элементом является элемент <М1тІ>. Получить в ІаѵаЗсгірІ; доступ к 
корневому элементу довольно просто: 


боситепб. сІоситепбЕІетепІ; 
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Корневой узел имеет все указатели, используемые для перемещений, точно также, как и любой другой 
ООМ-узел. Используя эти указатели вы имеете возможность приступить к просмотру всего документа, 
перемещаясь на любой нужный элемент. К примеру, чтобы добраться до элемента <61>, можно воспользоваться 
следующим кодом: 

// Этот код не работает! 

сіосишепб . йоситепСЕІетепІ: . бігзбСЬіІсІ . пехбЗіЫіпд. СігзбСЬіІсІ 

Но мы тут же натыкаемся на свое первое препятствие: указатели ООМ могут указывать как на текстовые 
узлы, так и на элементы. А предыдущий оператор на самом деле вместо того, чтобы указывать на элемент <М1>, 
указывает на элемент <ІІ1:Іе>. Почему так происходит? А потому что есть одна из самых неприятных и наиболее 
спорных сторон ХМЬ: пустого пространства. Если присмотреться, то можно заметить, что между элементами 
<М1:тІ> и <беасІ> на самом деле находится символ конца строки, который рассматривается как пустое 
пространство, а значит, что фактически первым следует текстовый узел, а не <беаб>-элемент. Из этого 
обстоятельства следует извлечь три урока: 

• Создание красивой и понятной НТМІ_-разметки фактически может привести к путанице при попытке 
просмотреть ООМ с использованием только одних указателей. 

• Использование для перемещения по документу только одних ООМ-указателей может стать слишком 
громоздким и непрактичным. 

• Зачастую непосредственный доступ к текстовым узлам не нужен, он требуется только к тем элементам, 
которые их окружают. 

В связи с этим возникает вопрос: А нет ли более практичного способа для поиска элементов в документе? 
Конечно же есть! Вооружившись парой полезных функций, вы с легкостью сможете улучшить существующие 
методы и значительно упростить перемещения по ООМ. 

Как справиться в ООМ с пустым пространством 

Вернемся к примеру НТМІ_-документа. Ранее мы уже пытались переместиться к элементу <И1> и 
столкнулись с трудностями, обусловленными наличием внешних текстовых узлов. Ладно бы это касалось только 
одиного-единственного элемента, но что получится, если вам захочется добраться до элемента, который следует 
за <Ы>? Вы опять наткнетесь на досадную ошибку пустого пространства, вынуждающую применить 
,пех(:5іЫіпд.пех1:5іЫіпд, чтобы перескочить символы конца строки между элементами <Ы> и <р>. Но не все еще 
потеряно. Существует методика, показанная в листинге 5.2, которая действует в качестве обхода этой ошибки 
пустого пространства. Эта специфическая методика удаляет из ООМ-документа все текстовые узлы, содержащие 
только пустые пространства, облегчая тем самым проход по дереву модели. Ее применение не окажет заметного 
влияния на отображение вашего НТМЬ, но значительно упростит для вас самостоятельные перемещения по 
документу. Следует заметить, что результаты работы этой функции не являются необратимыми, поэтому при 
каждой загрузке НТМІ_-доку мента ее придется запускать заново. 

Листинг 5.2. Обход ошибки пустого пространства в ХМІ_-документах 

Дипсбіоп сІеапИЬібезрасе ( еіешепб ) { 

// Если еіешепб не предоставлен, работать со всем НТМЬ-документом 
еіешепб = еіешепб || босишепб; 

//В качестве отправной точки использовать первый дочерний узел 
ѵаг сиг = еіешепб . ДігзбСЬіІсІ; 

// Действовать, пока не закончатся дочерние узлы 
иЫІе ( сиг != пиіі ) { 



80 


// Если узел текстовый, и не содержит ничего, кроме пустого 
// пространства 

іб ( сиг. посІеТуре == 3 && ! /\5/. безб (сиг. посІеѴаІие) ) { 

// Удалить текстовый узел 
еіешепр . гелюѵеСЫІсі ( сиг ); 

// А если это элемент 
} еізе іб ( сиг. посІеТуре == 1 ) { 

// осуществить рекурсивный вызов вниз по документу 
сІеапИЬібезрасе ( сиг ); 

} 

сиг = сиг. пехбЗіЫіпд; // перемещение через дочерние узлы 

} 

} 

Скажем, вы хотите воспользоваться этой функцией в примере документа для перемещения к элементу 
который следует за первым элементом <И1>. Код, выполняющий эту задачу, может иметь следующий вид: 

сІеапИЬібезрасе (); 

// Обнаружение элемента Н1 
боситепб. боситепбЕІетепб 

. бігзбСЬіІсІ // Обнаружение элемента Неа<3 

.пехбЗіЫіпд // Обнаружение элемента <Ьо<Зу> 

. бігзбСЬіІсІ // Получение элемента Н1 

.пехбЗіЫіпд // Получение смежного абзаца 

У этого метода есть свои преимущества и недостатки. Самое большое преимущество состоит в том, что 
получаете какой-то здравый смысл в попытках перемещения по ЭОМ-документу. Но эта методика работает очень 
медленно, поскольку вам нужно пройти по каждом у отдельно взятому ООМ-элементу и текстовому узлу, 
выискивая текстовые узлы, содержащие только пустые пространства. Если в документе большой объем 
содержимого, эта методика может существенно замедлить загрузку вашего веб-сайта. К тому же при каждой 
вставке в документ нового кода НТМІ_, необходимо провести пересканирование этой части ООМ, чтобы 
воспрепятствовать добавлению к документу новых текстовых узлов, состоящих из пустых пространств. 

В этой функции применен один важный подход — использование типов узлов. Тип узла может быть 
определен путем проверки свойства посІеТуре на наличие определенного значения. Есть несколько возможных 
значений, но три из них встречаются чаще других: 

• Элемент (посІеТуре = 1): Этот тип соответствует большинству элементов ХМЬфайла. Например, элементы 
<I і >,<а>, <р> и <Ьосіу> имеют значение свойства посІеТуре равное 1. 

• Текст (посІеТуре = 3 ): Этот тип соответствует всем текстовым участкам внутри документа. При 
перемещении по ЭОМ-структуре с помощью методов ргеѵіоизЗіЫіпд и пехіЗіЫіпд вы будете часто 
сталкиваться с участками текста внутри, между элементами. 

• Документ (посІеТуре = 9)\ Этот тип соответствует корневому элементу документа. К примеру, в НТМІ_- 
документе — это элемент < ИІітІ >. 
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В дополнение к этому для ссылок на различные типы узлов ООМ вы можете использовать константы (но 
только при работе с браузерами, не относящимися к семейству ІЕ). К примеру, чтобы не запоминать значение 
чисел 1, 3 или 9, вы можете просто воспользоваться константами боситепІ:.ЕІ_ЕМЕМТ_МСЮЕ, боситеп(:.ТЕХТ_МСЮЕ 
или боситеп1.00СІІМЕІ\ІТ_[\ІСЮЕ. Поскольку постоянная очистка ЭОМ от пустых пространств может стать слишком 
обременительным занятием, нам нужно исследовать другие способы перемещения по ООМ-структуре. 

Простое перемещение по йОМ-структуре 

Используя принцип простого РОМ-перемещения (наличие указателей для всех направлений перемещения) 
вы можете разрабатывать функции, которые больше вам подойдут при перемещении по НТМІ_ ООМ-документу. 
Этот принцип основан на том факте, что большинству веб-разработчиков требуются лишь перемещения по ЭОМ- 
элементам, и очень редко по их собратьям — текстовым узлам. Вам помогут несколько полезных функций, 
которые можно применить вместо стандартных ргеѵіоизЗіЫіпд, пехіЗіЫіпд, ГігвіСІтіІсІ, ІазІСИіІб и рагепШобе. В 
листинге 5.3 показана функция, которая возвращает элемент, которые предшествует текущему элементу, или пиІІ, 
если предыдущий элемент не найден, работающая наподобие свойства элемента ргеѵіоивЗіЫіпд. 

Листинг 5.3. Функция, предназначенная для обнаружения предыдущего сестринского элемента по отношению к 
переданному ей элементу 

Типсбіоп ргеѵ( еіеш ) { 

сіо { 

еіеш = еІет.ргеѵіоизЗіЫіпд; 

} мЬііе ( еіеш && еіеш. побеТуре != 1 ); 
гебигп еіеш; 

} 


В листинге 5.4 показана функция, возвращающая элемент, следующий за текущим элементом, или пиІІ, 
если следующий элемент не найден, работающая наподобие свойства элемента пехІЗіЫіпд. 

Листинг 5.4. Функция, предназначенная для обнаружения следующего сестринского элемента по 
отношению к переданному ей элементу 

Типсбіоп пехб( еіеш ) { 

сіо { 

еіеш = еіеш. пехСЗіЫіпд; 

} мЬііе ( еіеш && еіеш. побеТуре != 1 ); 
гебигп еіеш; 

} 


В листинге 5.5 показана функция, возвращающая первый дочерний элемент, работающая наподобие 
свойства элемента ГігзіСІпіІсі. 

Листинг 5.5. Функция для обнаружения первого дочернего элемента по отношению к переданному ей 
элементу 


Типсбіоп Іігзб( еіеш ) { 

еіеш = еіеш. ІігзССЫІб; 
гебигп еіеш && еіеш.побеТуре != 1 ? 
пехб ( еіеш ) : еіеш; 


} 
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В листинге 5.6 показана функция, возвращающая последний дочерний элемент, работающая наподобие 
свойства элемента ІазіСЫІсі. 

Листинг 5.6. Функция для обнаружения последнего дочернего элемента по отношению к переданному ей 
элементу 

Іипсбіоп Іазб ( еіеш ) { 

еіеш = еіет. ІазбСЬіІсІ; 
гебигп еіеш && еіеш. побеТуре != 1 ? 
ргеѵ ( еіеш ) : еіет; 

} 


В листинге 5.7 показана функция, возвращающая родительский элемент, работающая наподобие свойства 
элемента рагепІІМосІе. Дополнительно вы можете указать ей количество родительских элементов, на которое сразу 
нужно подняться — например, рагеп1(еІет,2) будет эквивалентно выражению рагеп1(рагеп1(еІет)). 

Листинг 5.7. Функция для обнаружения родителя указанного элемента 

Іипсбіоп рагепб( еіеш, пит ) { 

пит = пит | | 1; 

бог ( ѵаг і = 0; і < пит; і++ ) 

іб ( еіет != пиіі ) еіет = еІет.рагепбЛосІе; 
гебигп еіет; 

} 


Используя эти новые функции, вы можете быстро просматривать ЭОМ-документ, не испытывая волнений 
насчет текста, который находится между элементами. Например, чтобы обнаружить элемент, следующий за 
элементом <Н1>, подобно тому, что мы делали раньше, теперь нужно сделать следующее: 

// Обнаружение элемента, следующего за элементом <Ы> 
пехб ( бігзб ( сіоситепб . Ъобу ) ) 

Изучая этот код, нужно обратить внимание на две особенности. Первая касается новой ссылки: 
боситепІ.Ьосіу. Все современные браузеры предоставляют ссылку на элемент <Ьосіу> внутри свойства Ьобу НТМІ_ 
РОМ-документа. Этим обстоятельством можно воспользоваться для того, чтобы сделать код компактнее и 
понятнее. Вторая, как вы могли заметить, заключается в том, что способ написания функции противоречит норме 
интуитивного восприятия. Обычно, представляя себе перемещение, вы можете сказать: «Начиная с элемента 
<Ьобу>, получить первый элемент, а затем получить следующий элемент», но способ, которым это отображено 
физически, кажется развернутым в обратном направлении. Чтобы обойти эту несуразицу, я теперь рассмотрю 
несколько способов, чтобы сделать ваш код, предназначенный для перемещений, более понятным. 

Привязка к каждому НТМІ_-элементу 

В Еігеіох и Орега имеются мощные и доступные прототипы объектов, названные НТМбЕ1етеп1:, которые 
позволяют привязывать функции и данные к каждому отдельному НТМб ЭОМ-элементу. Функции, описанные в 
предыдущем разделе несколько сложны и непонятны, и могут быть заменены другими, улучшенными функциями. 
Одним из лучших способов для этого является привязка ваших функций непосредственно к прототипу 
НТМбЕІетепІ:, что приведет к их непосредственной привязке к каждому отдельному НТМІ_ ООМ-элементу. Чтобы 
это заработало, вам нужно внести в функции, созданные в предыдущем разделе, следующие три изменения: 

1. Нужно добавить в начале функции одну строку, чтобы ссылка на элемент была сделана, как на данный 
объект — 1/7/5, а не получена из перечня аргументов. 



83 


2. Нужно убрать аргумент элемента, надобность в котором уже миновала. 

3. Нужно привязать функцию к прототипу НТМІ_ЕІетеп(:, чтобы у вас появилась возможность использовать ее 
с каждым НТМБ-элементом, имеющимся в БОМ. 

К примеру, функция пехі будет выглядеть, как показано в листинге 5.8. 

Листинг 5.8. Динамическая привязка новой функции ЭОМ-перемещения ко всем НТМІ_ ЭОМ-элементам 

НТМЬЕІешепІ; . ргобобуре . пехб = ІипсСіоп () { 

ѵаг еіеш = Лііз; 
сіо { 

еіеш = еіеш. пехСЗіЫіпд; 

} мЬіІе ( еіеш && еіеш. побеТуре != 1 ); 
гебигп еіеш; 


Теперь вы можете воспользоваться функцией пехі (и всеми другими функциями, после их 
предварительной переделки) следующим образом: 

// Простой пример — получение первого <р>-элемента 
боситепС . Ъобу. Тігзб () . пехбО 

Благодаря этому код становится намного проще и понятнее. Теперь, получив возможность создавать код, 
который следует естественному ходу размышлений, вы можете сделать свой ^ѵаБсгірі в целом намного понятнее. 
Если такой стиль написания вас заинтересовал, я настоятельно рекомендую взять на заметку библиотеку )())иегу 
ІаѵаЗсгірі (ИИрУ/здиегу-сот), в которой делается большая ставка на использование этой технологии. 

ПРИМЕЧАНИЕ 

Поскольку НТМІ_ЕІетеп1 существует только в трех современных браузерах (РігеГох, ЗаГагі и Орега) для его 
работы в Іпіетеі Ехріогег нужно предварительно предпринять специальные меры. Речь идет о общедоступной и 
очень полезной библиотеке, созданной Джейсоном Карлом Дэвисом (Іазоп КагІ Баѵіз) (МірѴ/ЬгоѵѵзегІапсІ.огд), 
которая предоставляет доступ к НТМІ_ЕІетеп1: (а также ряд других свойств) в двух, не поддерживающих этот 
прототип объектов браузерах. Дополнительные сведения об этой библиотеке можно найти здесь: 
Ні1:1:р ://ѵѵѵѵѵѵ. Ьгоѵѵзегіа пс). огд/зсгірііз/іпііт Іеіетепі:/. 

Стандартные методы йОМ 

Все современные реализации БОМ содержат несколько методов, улучшающих жизнь разработчиков. Их 
совместное использование с некоторыми собственными функциями делает перемещение по БОМ намного 
приятнее. Для начала рассмотрим два довольно мощных метода, включенных в ІаѵаЗсгірІ: РОМ: 

деіЕІетепіВуІсІС'еѵегуѵѵІіеге")-. Этот метод, который может быть выполнен исключительно в отношении 
объекта документа, обнаруживает все элементы, Ш которых равен еѵегутііеге. Это очень мощная функция, 
предоставляющая самый быстрый способ немедленного доступа к элементу. 

деіЕІетепі:5ВуТадЫате("ІІ")\ Этот метод, который может быть выполнен в отношении любого элемента, 
обнаруживает все нисходящие элементы, у которых в качестве имени тега фигурирует И, и возвращает их в 
Ыосіеизі: (который практически идентичен массиву). 


ВНИМАНИЕ 
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Вы должны понимать, что деіЕІетепіВуІсі работает с НТМІ_-документами: он просматривает все элементы и 
обнаруживает один из них, имеющий атрибут под названием ісі, имеющий определенное значение. Но если вы 
загружаете удаленный ХМІ_-документ и используете де1;ЕІетеп1;ВуІсІ (или используете реализацию ЭОМ в любом 
другом языке, кроме іаѵаБсгірІ:), то в нем по умолчанию не используется атрибут і<± Это сделано намеренно; ХМІ_- 
документ должен определить явным образом, что из себя представляет атрибут ісі, используя обычно ХМІ_- 
определение или схему. 

ВНИМАНИЕ 

Метод деіЕІетепізВуТадІМате возвращает І\Іос1еІ_І5(:. Эта структура по своему виду и поведению во многом 
похожа на обычный массив іаѵаЗсгірІ:, с одной важной оговоркой: в нем отсутствуют обычные для массива 
іаѵаЗсгірі методы .ризІп(), .рор(), .вЫГ(:() и т.д. Об этом нужно помнить при работе с деіЕІегпепізВуТадІМате, чтобы 
избежать неприятностей. 

Эти методы доступны во всех современных браузерах и могут быть очень полезны для обнаружения 
определенных элементов. Возвращаясь к предыдущему примеру, в котором мы пытались обнаружить элемент 
<М1>, теперь мы можем сделать следующее: 

сіоситепб . дебЕІетепбзВуТадЛате ("Ы ") [ 0 ] 

Этот код будет гарантированно работать, и всегда возвращать первый <б1>-элемент, встречающийся в 
документе. Еще раз вернемся к документу и представим, что нам нужно получить все <1і>-элементы и добавить к 
ним обрамление: 

ѵаг 1і = сіоситепб . дебЕІетепбзВуТадЛате ("1і") ; 
бог ( ѵаг д =0; д < Іі.ІепдбЬ; д++ ) { 

1і[д].збуіе. Ъогбег = "Ірх зоіісі #000"; 

} 


В заключение, представим, что нам нужно сделать полужирным текст в первом <1і>-элементе, который, 
как оказалось, имеет связанный с ним и известный нам Ю: 

сіоситепб . дебЕІетепбВуІсІ ( "еѵегуиЬеге" ) . збуіе . бопбМеідЬб = 'Ъоісі'; 

Здесь вы, возможно, обратили внимание, что процесс получения отдельного элемента с определенным ІБ 
требует большого количества сопроводительного текста, что, впрочем, справедливо и для извлечении элемента по 
имени тега. Чтобы обойти это обстоятельство и упростить процесс извлечения, можно создать упаковочную 
функцию: 

бипсбіоп ісі (паше) { 

гебигп сіоситепб . дебЕІетепбВуІсІ (пате) ; 

} 


В листинге 5.9. показана простая функция, предназначенная для обнаружения элементов внутри НТМІ_ 
ООМ-документа по имени тега. Эта функция принимает от одного до двух аргументов. Если предоставляется один 
аргумент, и это имя тега, то поиск будет вестись во всем НТМб-документе. Иначе вы должны предоставить в 
первом необязательном аргументе ЭОМ-элемент, который будет использован в качестве контекста. 

Листинг 5.9. Функция для обнаружения элементов по имени тега внутри НТМб ООМ-документа 

бипсбіоп бад(паше, еіеш) { 

// Если контекстный элемент не предоставлен, вести поиск по всему 
// документу 
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гебигп (еіеш | | сіоситепб) . деСЕІетепСзВуТадЛате (пате); 

} 


Давайте еще раз вернемся к проблеме обнаружения элемента, который следует за первым элементом 
<61>. К нашему удовлетворению, код для осуществления этой операции может стать еще короче: 

// Обнаружение элемента, находящегося сразу же за первым элементом <Ы> 
пехб ( Рад ( "Ы") [0] ); 

Эти функции предоставляют вам мощность, необходимую для быстрого извлечения нужных для работы 
элементов внутри ЭОМ-документа. Перед тем, как изучить способы применения этой мощности для модификации 
ЭОМ, нужно накоротке взглянуть на проблемы загрузки ЭОМ при первоначальном запуске вашего сценария. 

Ожидание загрузки НТМІ_ РОМ 

При работе с НТМІ. ЭОМ-документами существует одно затруднение, связанное с тем, что код ЭаѵаЗсгірІ: 
может быть исполнен еще до того, как ЭОМ полностью загрузится, что является потенциальной угрозой 
возникновения в коде ряда проблем. Последовательность операций в браузере выглядит следующим образом: 

• Синтаксический анализ НТМІ_. 

• Загрузка внешних сценариев и таблиц стиля. 

• Выполнение сценариев по мере их разбора в документе. 

• Полное построение НТМІ_ ЭОМ. 

• Загрузка изображений и внешнего контента. 

• Завершение загрузки страницы. 

Сценарии, находящиеся в заголовке, и загружаемые из внешнего файла выполняются до фактического 
построения НТМІ_ ЭОМ. Как отмечено ранее, это является существенной проблемой, поскольку все сценарии в 
этих двух местах не будут иметь доступа к ООМ. Но, к счастью существует ряд способов обхода этой проблемы. 

Ожидание загрузки страницы 

Безусловно, самой распространенной методикой является простое ожидание загрузки всей страницы перед 
выполнением любых ЭОМ-операций. Эта методика может быть использована за счет простой привязки функции, 
которая должна быть выполнена после загрузки страницы, к событию Іоасі объекта ѵѵіпсіоѵѵ. События будут 
подробно рассмотрены в главе 6. В листинге 5.10 показан пример выполнения связанного с ЭОМ кода, после того, 
как завершится загрузка страницы. 

Листинг 5.10. Функция асісіЕѵепі, предназначенная для привязки обратного вызова к свойству 
ѵѵіпсіоѵѵ.опіоаб 

// Ожидание загрузки страницы 

// (Используется асІсІЕѵепі:, рассмотренная в следующей главе) 
асІсіЕѵепІ: (ѵѵіпсіоѵѵ, "Іоасі", бипсбіоп () { 

// Выполнение НТМЬ БОМ-операций 

пехб ( ісі ("еѵегуиЬеге") ) . збуіе . Ъаскдгоипсі = ’Ыие'; 

}) ; 


Может быть эта операция и проще всех, но она всегда будет и медленнее всех. Из очередности 
загрузочных операций можно заметить, что завершение загрузки страницы — это самый последний выполняемый 
шаг. Это значит, что если у вас на странице существенное количество изображений, видеофрагментов и т.д., 
пользователи должны какое-то время ждать, пока, наконец, не будет выполнен код ІаѵаЗсгірІ. 
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Ожидание загрузки основной части ООМ 

Вторая методика носит слишком изощренный характер, и ее применение совершенно не рекомендуется. 
Если помните, в предыдущем разделе я сказал, что встроенные сценарии после того, как ООМ будет выстроена. 
Это верно лишь наполовину. Фактически сценарии выполняются по мере их обнаружения, когда ЭОМ еще 
находится в процессе построения. Это значит, если сценарий встроен в страницу где-то посредине, то он будет 
иметь непосредственный доступ к первой половине ЭОМ. Но если сценарий будет встроен в качестве последнего 
элемента на странице, то вы получите доступ ко всем предыдущим элементам, имеющимся в ЭОМ, давая вам 
хитрый способ имитировать ЭОМ-загрузку. Реализация этого метода обычно выглядит так, как показано в 
листинге 5.11. 

Листинг 5.11. Определение загрузки ООМ путем вставки тега <5сгір1> (содержащего вызов функции) в 
конце НТМІ_ ООМ 

<Ы:ш1> 

<ЬеасІ> 

<Сі'Ые>Тестирование загрузки БОМ</1;і1;1е> 

<зсгірС буре="1:ех1;/ ) аѵазсгірС"> 
бипсбіоп іпіС() { 

аіегр( "БОМ загружен!" ); 

СадО'Ы") [ 0 ] . збуіе . Ъогсіег = "4рх зоіісі Ыаск"; 

} 

</зсгірО 
</ЬеасІ> 

<ЬосІу> 

<Ы>Тестирование загрузки БОМ</Ы> 

<!-- Основная часть НТМЬ находится здесь --> 

<зсгірС буре="1:ех1;/) аѵазсгір1;">іпі1: () ; </зсгірО 
</ЪосІу> 

</Ы:т1> 

В этом примере сценарий встроен в ООМ последним элементом; это будет последним элементом, который 
будет подвергнут анализу и выполнению. Единственное, что здесь будет выполнено — это функция іпіі, которая 
должна содержать любой связанный с ООМ код, который нужно выполнить. Самая большая проблема, связанная с 
этим решением заключается во вносимом им беспорядке: в НТМІ_ вносится дополнение только ради того, чтобы 
определить, загружен ли ООМ. Такая методика обычно считается внесением беспорядка, поскольку вы добавляете 
на веб-страницу дополнительный, ненужный код только для того, чтобы проверить состояние ее загрузки. 

Вычисление окончания загрузки ООМ 

И последняя методика, которая может быть использована для отслеживания загрузки ООМ, является, 
наверное, самой сложной (с точки зрения реализации), но также и наиболее эффективной. Вы получаете простоту 
привязки к событию загрузки окна в сочетании со скоростью технологии встроенного сценария. 

Эта методика работает за счет контроля готовности необходимых вам свойств НТМІ. ЭОМ-документа с 
максимально возможной физической скоростью, без блокирования браузера. Есть несколько вещей, которые 
нужно проконтролировать, чтобы понять, что с НТМІ_-доку ментом уже можно работать: 

1. сіоситепі : Нужно посмотреть, существует ли уже ЭОМ-документ. Если проверка проводится слишком рано, 

то скорее всего, будет получен неопределенный результат. 



87 


2. сІоситепіі.деіЕІетепізВуТадЫате и сІоситепі.деіЕІетепіВуІсІ-. Нужно проверить, есть ли у документа часто 
используемые функции деіЕІетепі5ВуТад№те и деіЕІетепіВуІсІ; эти функции будут существовать по их 
готовности к применению. 

3. сІоситепі.ЬосІу. Чтобы полностью удостовериться в готовности, нужно проверить, был ли полностью 
загружен элемент <Ьобу>. Теоретически это должна отловить предыдущая проверка, но я обнаружил 
примеры, в которой эта проверка не приводила к достаточно надежным результатам. 

Используя эти проверки вы получаете возможность получения достаточно четкой картины, показывающей, 
когда модель йОМ будет готова к использованию (Это вполне подходящий вариант, на который может быть 
затрачено всего несколько миллисекунд). Этот метод практически безупречен. Используя только ранее 
перечисленные проверки, сценарий будет относительно хорошо работать на всех современных браузерах. Но 
недавно, в связи с последними усовершенствованиями системы кэширования, осуществленными в Рігеіох, событие 
загрузки окна может состояться еще до того, как ваш сценарий будет в состоянии определить, готов ли ЭОМ к 
работе. Чтобы воспользоваться этим преимуществом, я также привязываю проверку к событию загрузки окна, в 
надежде получить некоторое дополнительное ускорение. 

В заключение функция ботКеасІу соберет ссылки на все функции, которые нужно запускать, когда ЭОМ 
готова к работе. Как только можно будет считать, что ЭОМ готова, перебираются все ссылки, и функции 
выполняются одна за другой. В листинге 5.12 показана функция, которая может быть использована для слежения 
за тем, когда ООМ будет полностью загружена. 

Листинг 5.12. Функция, предназначенная для отслеживания готовности ЭОМ 

бипсбіоп ботКеабу( И ) { 

// Если БОМ уже загружен, немедленно выполнить функцию 
іб ( ботКеабу.бопе ) гебигп Е(); 

/ / Если мы уже дополнили функцию 
іб ( ботКеабу. бітег ) { 

// внести ее в список исполняемых 
ботКеабу. геасіу . ризЬ. ( ± ); 

} еізе { 

// Привязывание события завершения загрузки страницы, 

// на тот случай если ее загрузка закончится первой. 

// Здесь используется асМЕчепб. 
асМЕчепб ( иіпсіом, "Іоасі", ізБОМКеасІу ); 

// Инициализация массива исполняемых функций 
бошКеабу. геасіу = [ Е ]; 

// Проверка БОМ на готовность, проводимая как можно быстрее 
бошКеабу. бішег = зебіпбегѵаі ( ізБОМКеабу, 13 ); 

} 

} 


// Проверка на готовность БОМ к перемещению по ее структуре 
Еипсбіоп ізБОМКеабуО { 

// Если мы уже определили готовность страницы — проигнорировать 
// дальнейшее выполнение 
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іі ( сіошВеасіу.сіопе ) гебигп Іаізе; 

// Проверка доступности некоторых функций и элементов 
іі ( сІосшпепН && боситепб .деСЕІетепСзВуТадЛате && 
боситепб . деІсЕІетепбВуІсІ && сІоситепП .Ъосіу ) { 

// Если они готовы, можно прекратить проверку 
сіеагіпбегѵаі( сіошВеасіу. бітег ); 
сіошВеасіу. 6ітег = пиіі; 

// Выполнение всех ожидавших функций 
Іог ( ѵаг і = 0; і < сІотВеасІу. геасіу. Іепдігіі; і++ ) 
сіошВеасіу. геасіу [ і ] () ; 

// Сохранение того, что только что было сделано 
сіошВеасіу. геасіу = пиіі; 
сіошВеасіу. сіопе = бгие; 

} 

} 


Теперь мы посмотрим, как это могло бы выглядеть в НТМІ_-документе. Функция ботВеабу должна быть 
использована, также, как используется функция асІФЕѵепТ (рассматриваемая в главе 6), связывая запуск вашей 
конкретной функции с готовностью документа к перемещению по его элементам и обращению с ними. Для этого 
примера я поместил функцию сіотВеасіу во внешний файл ІаѵаЗсгірІ;, названный сіотгеасіудз. В листинге 5.13 
показано, как можно воспользоваться новой функцией сіотВеасіу для отслеживания загрузки ООМ. 

Листинг 5.13. Использование функции сіотВеасіу для определения готовности ООМ к перемещениям по ее 
структуре и внесению изменений 

<Ыдп1> 

<ііеасІ> 

<‘Ы'Ые>Тестирование загрузки БОМ</1сі'Ые> 

<зсгірб буре="1:ех1;/^ аѵазсгірб" згс="сІотгеас1у . ^ з"></зсгірб> 

<зсгірб буре="1сех1:/^ аѵазсгірб"> 

Іипсііоп Сад(пате, еіет) { 

// Если контекстный элемент не предоставлен, вести поиск по всему 
// документу 

гебигп (еіет | | сіоситепб) . деСЕІетепСзВуТадЛате (пате) ; 

} 

сіошВеасіу ( Іипсбіоп () { 

аіегб ( "БОМ загружен!" ); 

СадС'Ы") [ 0 ] . збуіе . Ъогсіег = "4рх зоіісі Ыаск"; 

}) ; 

</ зсгірО 
</ііеасІ> 

<ЪосІу> 

<Ы>Тестирование загрузки БОМ</Ы> 

<!-- Основная часть НТМЬ находится здесь --> 
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</ЪосІу> 

</ЬЬт1> 

Теперь, когда вы узнали о нескольких способах перемещения по типичному БОМ хмь -документу, и как 
обойти сложности с загрузкой нтмь БОМ-документа, должен быть поставлен вопрос: нет ли каких-нибудь более 
подходящих способов обнаружения элементов в нтмь -документе? К нашему удовольствию, на этот вопрос можно 
ответить твердым «да». 

Обнаружение элементов в документе НТМЬ 

Желаемый порядок обнаружения элементов в НТМЬ-документе часто сильно отличается от порядка, 
связанного с ХМЬ-документом. Это звучит несколько нелепо, учитывая, что современный НТМЬ фактически 
является подмножеством ХМЬ; однако НТМЬ-документ содержит ряд существенных отличий, которыми можно 
воспользоваться. 

Для 1аѵа5сгір1/НТМЬ-разработчика есть два наиболее известных преимущества: использование классов и 
знание С55-селекторов. С расчетом на их применение можно создать ряд мощных функций, упрощающих и 
проясняющих перемещение по ЭОМ. 

Обнаружение элементов по имени класса 

Обнаружение элементов по имени их классов — довольно распространенная технология, 
популяризированная Симоном Уиллисоном (Зітоп ѴѴІІІІвоп) (Ы±р://5Ітоп.іпси1:іо.сот) в 2003 году и впервые 
показанная Эндрю Хэйуордом (Апсігеѵѵ Науѵѵагсі) (Іг11р://ѵѵ\л/ѵѵ.тоопсаІТте.ик). Эта технология довольно проста и 
понятна: поиск ведется по всем элементам (или подмножеству элементов) в целях обнаружения тех из них, 
которые обладают указанным классом. Возможная реализация показана в листинге 5.14. 

Листинг 5.14. Функция, осуществляющая поиск всех элементов, имеющих определенное имя класса 


Ьипсбіоп ЬазСІазз (паше,буре) { 
ѵаг г = []; 

// Обнаружение имени класса (работает и при наличии 
// нескольких имен класса) 

ѵаг ге = пем ВедЕхр("( А |\\з)" + паше + "(\\з|$)"); 

// Ограничение поиска элементами определенного типа 
// или поиск по всем элементам 
ѵаг е = сіосишепЬ . деЬЕІешепЬзВуТадЛаше (буре | | 
бог ( ѵаг ^ =0; ) < е.іепдбб; ^++ ) 

// Если элемент имеет нужный класс, добавление его в 

// возвращаемый массив 

іб ( ге.ЬезЬ(е[^]) ) г.ризЬ( е[д ] ); 

// Возвращение списка соответствующих элементов 
гебигп г; 


Теперь эту функцию можно использовать для быстрого обнаружения любого элемента или любого 
элемента определенного типа (например, <1і> или <р>), имеющего указанное имя класса. При указании названия 
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тегов, по которым ведется поиск, работа всегда будет вестись быстрее, чем при поиске по всем элементам (*), 
поскольку элементов, которые нужно просмотреть в поиске нужных, будет меньше. Возьмем, к примеру, наш 
НТМІ_-документ. Если нужно обнаружить все элементы, имеющие класс іеві;, можно воспользоваться следующим 
кодом: 

ЬазСІазз ("Сезб"") 

Если нужно обнаружить только <ІІ>-элементы, имеющие класс ІегЬ, можно воспользоваться следующим 

кодом: 

ЬазСІазз ("Сезб", "1і") 

И наконец, если нужно обнаружить первый <ІІ>, имеющий класс 1:е5(:, можно воспользоваться следующим 

кодом: 

ЬазСІазз ("Сезб", "1і" )[0] 

Эта функция и сама по себе обладает достаточной мощностью. Но если ее использовать в сочетании с 
методами де(:ЕІетеп1:ВуІс1 и деІіЕІетепІівВуТадЫате, то получится мощный набор инструментов, который можно 
использовать для проведения с ООМ и более сложной работы. 

Обнаружение элементов по селектору С55 

Будучи веб-разработчиком, вы уже знаете способ выбора НТМБ-элементов: 055-селекторы. 055- 
селектор — это выражение, используемое для применения 055-стилей к набору элементов. С каждой редакцией 
стандарта 055 (1, 2 и 3) к спецификации селекторов добавляются все новые и новые особенности, позволяющие 
разработчикам упростить обнаружение нужных элементов. К сожалению, разработчики браузеров совершенно не 
спешат с предоставлением полной реализации селекторов 055 2 и 3, а значит, вы можете и не знать о некоторых 
интересных возможностях, которые ими уже предоставлены. Если вы интересуетесь всеми новинками 055, я 
рекомендую изучить ѴѴЗС страницы, относящиеся к этой теме: 

• Селекторы 055 1: Ы:1:р://ѵѵ\л/ѵѵ.\л/3.огд/ТРІ/КЕС-С551#Ьа5Іс-сопсер1:5/ 

• Селекторы 055 2: Иіііір : //ѵѵѵѵѵѵ.ѵѵЗ . огд/ТК/РІЕС-С552/5еІес1:ог.ИСтІ 

• Селекторы 055 3: И1:(:р://ѵѵѵѵѵѵ.ѵѵ3.огд/ТК/2005/ѴѴО-С553-5еІесіог5-20051215/ 

В общем, свойства, доступные в каждой спецификации, схожи в том, что каждая последующая редакция 
содержит также все свойства предыдущих. Но с каждой редакцией прибавляется и количество новых свойств. К 
примеру, 055 2 содержит атрибуты и дочерние селекторы, а 055 3 предоставляет дополнительную языковую 
поддержку, выбор по типу атрибута и отрицание. Например, все эти выражения представляют из себя вполне 
допустимые 055-селекторы: 

#таіп <сііѵ> р: Это выражение обнаруживает элемент с Ю равным таіп, всех его потомков, являющихся 
<біѵ>-элементами, а затем всех потомков, являющихся <р>-элементами. Оно является вполне допустимым 
селектором 055 1. 

сііѵ.ііетз > р: Это выражение обнаруживает все <біѵ>-элементы, имеющие класс Иіетв, а затем 
обнаруживает все дочерние <р>-элементы. Оно является вполне допустимым селектором 055 2. 

сИѵ:поі(.ііетз )\ Это выражение обнаруживает все <сІіѵ>-элементы, у которых нет класса ііеггів. Оно 
является вполне допустимым селектором 055 3. 

Возможно, у вас вызвало удивление, почему я рассматриваю 055-селекторы, если фактически их нельзя 
использовать для обнаружения элементов (только для применения С55-стилей). Но и в этой области некоторые 
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предприимчивые разработчики сумели преодолеть стереотипы и создать реализации СЗЗ-селекторов, способные к 
полноценной обработке в стиле всех редакций, от СЗЗ 1 до СЗЗ 3. Использование этих библиотек позволит легко 
и быстро выбрать любой элемент, и выполнить над ним какие-нибудь операции. 

С55<2иегу 

Первая общедоступная библиотека с полной поддержкой С55 1-3 получившая название С55(3иегу, была 
создана Дином Эдвардсом (Эеап Есіѵѵагсіз) (сіеап.есіѵѵагсіз.пате). Заложенный в нее замысел был довольно прост: 
вы предоставляете ей С55-селектор, и сззС^иегу обнаруживает все соответствующие элементы. Кроме того, 
С55<3иегу разбита на несколько подбиблиотек, по одной для каждого уровня С55-селекторов, и у вас есть 
возможность при желании отключить поддержку С55 3, если в ней нет необходимости. Эта выдающаяся и 
всеобъемлющая библиотека работает на всех современных браузерах (Дин является сторонником 
кроссбраузерной поддержки). Для использования этой библиотеки вам нужно предоставить ей селектор, и 
дополнительно, контекстный элемент, в котором ведется поиск. Рассмотрим ряд примеров: 

// Обнаружение всех <р>, дочерних по отношению к <біѵ>-элементам 
сззОиегу ( "сііѵ > р"); 

// Обнаружение всех <сііѵ>, <р> и <богш>-элементов 
сззОиегу ( "сііѵ, р, іогш" ) ; 

// Обнаружение всех <р> и <біѵ>-элементов, а затем обнаружение всех 
// <а>-элементов, которые находятся внутри них 
ѵаг р = сззОиегу("р, біѵ" ); 
сззОиегу("а",р); 

В результате выполнения функции сззС^иегу возвращается массив соответствующих элементов. Теперь вы 
можете проводить над ними какие-нибудь операции, как и в случает выполнения метода деіЕІетепі5ВуТад№те. 
Например, чтобы добавить обрамление вокруг всех ссылок на Соодіе, можно сделать следующее: 

// Добавление обрамления вокруг всех ссылок на боодіе 
ѵаг д = сззОиегу( "а[Ьгеі А = ' доодіе .сот']"); 

Тог ( ѵаг і = 0; і < д.іепдбіі; і++ ) { 

д[і].збуіе. Ъогбег = "Ірх сіазііесі геб"; 

} 


Дополнительные сведения о СБзС^иегу можно найти на веб-сайте Дина Эдвардса (Оеап Есіѵѵагсіз), там же 
можно загрузить и весь исходный код: Ьіір://беап.есІѵѵагсІ5.пате/ту/с55С2иегу/. 

СОВЕТ 

Дин Эдвардс — настоящий волшебник ІаѵаЗсгірі; созданный им код просто поразителен. Я настоятельно 
рекомендую внимательно изучить его библиотеку сззС^иегу, или по крайней мере посмотреть, как на ІаѵаЗсгірІ 
пишется отлично расширяемый код. 

І<2иегу 

Этот новичок в мире библиотек ІаѵаЗсгірі, предоставляет некоторые совершенно новые способы 
написания кода. Сначала я приписывал ее к «простой» С55-селекторной библиотеке, во многом похожей на 
С55<3иегу, пока Дин Эдвардс не выпустил свою выдающуюся библиотеку С55<3иегу, заставив этот код развиваться в 
несколько в ином направлении. Библиотека обеспечивает полную поддержку С55 1-3 наряду с некоторыми 
основными функциональными возможностями ХРаіМ. Но на первое вместо выходят дополнительные возможности 
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по содействию перемещению по ООМ и работе с ее объектами. Как и сззС^иегу, ]С2иегу обладает полной 
поддержкой всех современных браузеров. Рассмотрим ряд примеров выборки элементов с использованием 
обычного для ]<3иегу сочетания С55 и ХРаУп: 

// Обнаружение всех <сІіѵ>-элементов, у которых имеется класс ' Ііпкз', и 
// <р>-элементов внутри них 
$ ( "сііѵ.Ііпкз [р] ") 

// Обнаружение всех потомков всех <р> и <біѵ>-элементов 
$ ("р, сііѵ" ) . ііпсі ("*") 

// Обнаружение каждой второй ссылки, указывающей на Соодіе 
$ ("а[@іігеі л =' доодіе . сот' ] : еѵеп" ) 

Для использования результатов, полученных от іС^иегу, есть два варианта. Во-первых, можно 
воспользоваться выражением $("выражение").деі( ), чтобы получить массив соответствующих элементов — точно 
такой же результат дает применение С55(3иегу. Во-вторых, можно воспользоваться специальными, встроенными в 
]<3иегу функциями для работы с С55 и с ООМ. Итак, если вернуться к примеру с сззС^иегу по добавлению 
обрамления ко все ссылкам на Соодіе, то можно сделать следующее: 

// Добавление обрамления вокруг всех ссылок на Соодіе 
$ ("а [ @Ьгеі Л =доод1е . сот] ") . сзз ( "Ъогбег", " Ірх сіазііесі геб") ; 

Вы можете найти документацию, множество демонстраций и примеров, а также получить возможность 
выборочной загрузки на веб-сайте проекта ]<3иегу: ИУрѴЭ'диегу.сот/. 

ПРИМЕЧАНИЕ 

Нужно отметить, что ни С55<3иегу, ни ]<3иегу фактически не требуют для перемещений использования 
именно НТМ1_-документа; они могут быть использованы с любым ХМб-документом. Для изучения разновидности 
перемещений, присущих только ХМІ_, прочитайте следующий раздел, посвященный ХРаУі. 

ХРаЫі 

Выражения ХРаУі — невероятно мощный способ перемещений по ХМЬ-документам. С учетом многолетней 
истории существования, предполагается, что везде, где есть реализация ООМ, где-то сразу за ней находится и 
ХРаУп. Выражения ХРаУп, даже при всем их многословии, намного мощнее всего, что может быть написано с 
использованием С55-селектора. В таблице 5.1 показано построчное сравнение различных 055-селекторов и 
ХРаУп-выражений. 

Таблица 5.1. Сравнение селекторов С55 3 и выражений ХРаУі 


Цель 

С88 3 

ХРаіЬ 

Все элементы 

* 

//* 

Все <р>-элементы 

р 

//Р 

Все дочерние элементы 

р > * 

//р/* 

Элемент по его ГО 

#іоо 

//*[@іб='іоо'] 

Элемент по его классу 

. іоо 

//*[сопбаіпз(@с1азз, ' іоо ')] 

Элемент с атрибутом 

* [бібіе] 

//* [@УіУ1е] 

Первый дочерний элемент всех <р>- 

р > *: іігзб- 

//р/*[0] 
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элементов 

сЫІсі 


Все <р>-элементы , имеющие дочерние А 

Иоб роззіЫе 

//р[а] 

Следующий элемент 

Р + 

* //р/боііоміпд- 
зіЫіпд : : * [0] 


Если вас заинтересовали предыдущие выражения, я рекомендую просмотреть две ХРаШ-спецификации 
(хотя обычно в современных браузерах полностью поддерживается только ХРаШ 1.0), чтобы получить 
представление о том, как работают эти выражения: 

• ХРаОі 1.0: Иі1р://ѵѵ\л™.ѵѵ3.огд/ТІѴхра1:І'і/ 

• ХРаОі 2.0: М(:1:р://ѵѵѵѵ\л/.ѵѵ3.огд/ТР1/храШ20/ 

Если вы хотите по-настоящему углубиться в эту тему, я рекомендую приобрести книгу издательства 
0'Р.еіІІу «ХМІ_ іп а ІМиІзІтеІІ», написанную Эллиоттом Харольдом (ЕІІІоІіе Нагоіб) и Скоттом Минзом (5сои Меапз) 
(2004 г.), или книгу издательства Аргезз «Ведіппіпд Х51_Т 2.0: Ргогп ІМоѵісе (іо РгоРе55іопаІ», написанную Джени 
Теннисон (Эепі Теппізоп) (2005 г.). В дополнение к этому есть несколько замечательных руководств, которые 
помогут освоить использование ХРаШ: 

• ѴѴЗЗсііооіз ХРаОі Тиіогіаі: Ы(:р://ѵѵ35СІтооІ5.сот/хра1Іп/ 

• 7.V0N ХРаіІі Тиіогіаі: Н1ір://2ѵоп.огд/ххІ/ХРа1ІіТи1:огіаІ/СепегаІ/ехатрІе5.І'іІ:тІ 

В настоящее время ХРаІІт не пользуется полной поддержкой в браузерах; для ІЕ и МогіІІа имеются полные 
(хотя и отличающиеся) реализации ХРаІМ, а версии для Заіагі и Орега находятся в стадии разработки. Чтобы 
обойти это обстоятельство существуют две ХРаШ-реализации, написанные полностью на ІаѵаЗсгірі. Вообще-то 
они довольно медлительны (по сравнению с реализациями на основе браузеров), но будут слаженно работать на 
всех современных браузерах: 

• ХМІ. Іог Зсгірі: МПрѴ/хт^з.з^.пеІ:/ 

• Соодіе А1АХ5І-Т: НИрУ/доод-аіахзНі.зРпеІ:/ 

В дополнение к этому, проект под названием Загізза (ІтМірѴ/запзза.эйпеІ:/) нацелен на создание общей 
надстройки над каждой браузерной реализацией. Это может дать возможность однократного создания кода, 
связанного с доступом к ХМІ_, сохраняя при этом скоростные преимущества от использования поддерживаемого 
браузером ХМІ_-парсинга. Самая большая проблема, связанная с применением этой технологии — сохраняющаяся 
до сих пор слабая поддержка ХРаІН в браузерах Орега и ЗаГагі, устраненная в предыдущих реализациях ХРаШ. 

Вообще-то технология использования встроенного в браузер ХРаШ рассматривается как 
экспериментальная по сравнению с имеющими широкую поддержку решениями на основе Эа ѵаЗсгі рС. Тем не 
менее, объем использования и популярность ХРаШ только возрастают, и эту технологию определенно нужно 
рассматривать в качестве претендента на трон С55-селектора. 

Теперь, когда вы располагаете знаниями и инструментарием, необходимым для обнаружения любого ООМ- 
элемента, или даже набора ЭОМ-элементов, настало время рассмотреть, куда всю эту мощь можно применить. 
Возможно все, от работы с атрибутами и до добавления и удаления ЭОМ-элементов. 

Получение содержимого элемента 

Содержимое всех ООМ-элементов может быть одним из трех вариантов: текста, дополнительных элементов 
или сочетания текста и элементов. Вообще-то, наиболее часто встречаются первый и второй варианты. В этом 
разделе мы собираемся рассмотреть распространенные способы извлечения содержимого элементов. 
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Получение текста, находящегося внутри элемента 

Возможно, для тех, кто плохо знаком с ООМ, задача получения текста, находящегося внутри элемента 
является довольно запутанной. Тем не менее, это такая же задача, связанная с работой с НТМІ_ ООМ- и ХМІ_ ЭОМ- 
документами, поэтому если вы узнаете о том, как это, расставит все по своим местам. В примере ООМ-структуры, 
показанной на рис. 5.3, имеется корневой <р>-элемент, который содержит элемент <5Ігопд> и блок текста. 
Элемент <5(топд> сам по себе тоже содержит блок текста. 



Рис. 5.3. Пример ООМ-структуры, содержащей как элементы, так и текст 

Посмотрим, как можно получить текст из каждого из этих элементов. Легче начать с элемента <5Ігопд>, 
поскольку в нем, кроме текстового узла ничего не содержится. 

Следует заметить, что существует свойство под названием іппегТехі, которое захватывает текст внутри 
элемента на тех браузерах, которые не работают на движке МоііІІа. Для нашей задачи это очень удобно. К 
сожалению, поскольку это свойство не работает на существенной части парка браузеров, и не работает в ХМІ_ 
РОМ-документах, нужно рассмотреть жизнеспособные альтернативы. 

Весь фокус получения текстового содержимого элемента состоит в том, что нужно помнить, что, как ни 
странно, текст не содержится непосредственно внутри элемента, он содержится в дочернем текстовом узле. То 
есть предполагается, что переменная вІгопдЕІет содержит ссылку на элемент <5Ігопд>. В листинге 5.15 показано, 
как извлечь текст из элемента, используя ЭОМ. 


Листинг 5.15.Получение текстового содержимого элемента <5Ігопд> 
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// На браузерах, не связанных с движком Могіііа: 
збгопдЕІеш.іппегТехб 

// На всех платформах: 
збгопдЕІеш. бігзбСПіІсІ . побеѴаІие 

Теперь, когда мы узнали, как получить текстовое содержимое из отдельного элемента, нужно посмотреть, 
как получить объединенное текстовое содержимое элемента <р>. В процессе решения этой задачи вы можете 
также разработать универсальную функцию для получения текстового содержимого любого элемента, независимо 
от того, что в нем фактически содержится, что и показано в листинге 5.16. Вызов вида бехб(элемент) вернет 
строку, в которой содержится объединенное текстовое содержимое элемента и всех содержащихся в нем 
дочерних элементов. 

Листинг 5.16. Универсальная функция для извлечения текстового содержимого из элемента 

бипсбіоп бехб(е) { 
ѵаг 1; = 

// Если элемент был передан, получение его дочерних элементов 
// иначе, предположение о том, что передан массив 
е = е. сЬіІсШосІез | | е; 

// Просмотр всех дочерних узлов 

бог ( ѵаг ^ =0; ^ < е.іепдбб; ^++ ) { 

// Если это не элемент, присоединить его текстовое значение 
// Иначе, провести рекурсивный перебор всех дочерних составляющих 
// элемента 

б += е[□].побеТуре != 1 ? 

е[^]. побеѴаІие : бехб (е [ ^ ] . сбіібііобез ) ; 

} 

// Возвращение соответствующего текста 
гебигп б; 

} 


Имея функцию, которая может быть использована для получения текстового содержимого любого 
элемента, вы можете извлечь текстовое содержимое элемента <р>, использованного в предыдущем примере. Код 
для выполнения этой задачи выглядит следующим образом: 

// Получение текстового содержимого элемента <р> 
бехб( рЕІеш ); 

Особенно приятно узнать, что эта функция гарантированно работает как с НТМб, так и с ХМІ_ ООМ- 
документами, то есть теперь у вас есть совместимый способ извлечения текстового содержимого любого 
элемента. 

Получение НТМІ-, находящегося внутри элемента 

В отличие от получения текста, находящегося внутри элемента, получения находящегося внутри него 
НТМб — одна из самых простых из выполняемых ООМ-задач. К счастью, благодаря свойству, разработанному 
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командой Іпіегпеі: Ехріогег, все современные браузеры теперь включают дополнительное свойство для каждого 
НТМЬ БОМ-элемента: ІппегНТМЬ. Благодаря этому свойству вы можете получить весь НТМІ_ и текст, находящиеся 
внутри элемента. К тому же, свойство ІппегНТМЬ работает очень быстро — зачастую намного быстрее, чем 
проведение рекурсивного поиска для обнаружения всего текстового содержимого элемента. Однако не все так 
радужно. Как именно реализовать свойство ІппегНТМЬ, зависит от браузера, и, поскольку, единых стандартов для 
этого не существует, браузер может вернуть любой, соответствующий его понятиям контекст. Рассмотрим, к 
примеру, некоторые из тех, довольно странных ошибок, которые должны быть вами учтены при использовании 
свойства іппегНТМІ: 

• Браузеры, основанные на движке МогіІІа, не возвращают при использовании свойства іппегНТМЬ 
элементов <5іуІе>. 

• ІпЬегпеі Ехріогег возвращает свои элементы с использованием только заглавных букв, что при поиске 
какой-то последовательности может сорвать ваши планы. 

• Свойство ІппегНТМІ. постоянно доступно только как свойство элементов НТМЬ БОМ-документов; попытка 
использовать его в ХМІ_ БОМ-документах приводит к извлечению нулевых значений. 

Использование свойства ІппегНТМІ- не вызывает затруднений; обращение к свойству дает вам строку, в 
которое находится НТМІ_- содержимое элемента. Если элемент не содержит каких-либо подэлементов, а содержит 
только текстовое наполнение, возвращаемая строка будет содержать только текст. Чтобы посмотреть, как это 
работает, мы изучим два элемента, показанные на рис. 5.3: 

// Получение внутреннего НТМЬ — іппегНТМЬ — элемента <зЬгопд> 

// должно вернуть "Неііо" 
зЬгопдЕІет.іппегНТМЬ 


// Получение внутреннего НТМЬ — іппегНТМЬ — элемента <р> 

// должно вернуть "<зЬгопд>Не11о</зЬгопд> Ноѵт аге уои сіоіпд?" 
рЕІеш.іппегНТМЬ 

Если вы уверены в том, что элемент не содержит ничего, кроме текста, этот метод может служить как 
самый простой заменитель трудностям получения текста, содержащегося в элементе. С другой стороны, наличие 
возможности извлечения НТМІ_- контента из элементов означает, что теперь вы можете создавать необычные 
динамические приложения, в которых применяется правка по месту. Более подробно разговор на эту тему будет 
вестись в главе 10. 

Работа с атрибутами элементов 

За извлечением содержимого элементов следующей наиболее часто совершаемой операцией является 
получение и установка значения атрибутов элементов. Как привило, список имеющихся у элемента атрибутов 
предварительно загружается с информацией, собранной из ХМЬ-представления самого элемента и сохраненной 
для последующего доступа в ассоциативном массиве, как в следующем примере фрагмента НТМЬ, находящегося 
внутри веб-страницы: 

<іогш паше="туЕогш" асЬіоп=" /ЬезЬ . сді" шеЫто<3="РОЗТ"> 


</ іогш> 

После загрузки в БОМ и в переменную ГоггпЕІет, НТМЬ элемент Гоггті будет иметь ассоциативный массив, 
из которого можно получить атрибуты в виде пар имя-значение. Результат этой работы выглядит следующим 
образом: 
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іогшЕІеш. аббгіЪибез = { 
паше: "шуЕогш", 
асбіоп: " /безб .сді", 
тебЬосІ: "Р08Т" 

} ; 


Определение существования атрибутов элемента с использованием массива атрибутов должно быть 
абсолютно тривиальной задачей, но есть одна проблема: по какой-то причине ЗаГагі это не поддерживаетз. Но и 
это еще не все, потенциально полезная функция ИазАКгіЬиІе не поддерживается в Іпіегпеі: Ехріогег. Так как же 
все-таки определить наличие атрибутов? Один из возможных способов показан в листинге 5.17, и заключается в 
использовании функции деІАНгіЬиІе (речь о которой пойдет в следующем разделе) с проверкой, не вернула ли 
она нулевое значение. 

Листинг 5.17. Определение наличия у элемента конкретного атрибута 

іипсбіоп ПазАббгіЪибе ( еіеш, паше ) { 

гебигп еіет.дебАббгіЪибе (пате) != пиіі; 

} 


Теперь, имея в арсенале эту функцию, и зная, как используются атрибуты, вы готовы приступить к 
извлечению и установке значений атрибутов. 

Получение и установка значений атрибута 

Для извлечения принадлежащих атрибутам данных из элемента существуют два различных метода, 
применение которых зависит от типа используемого вами ООМ-документа. Если вы хотите обезопасить себя от 
неожиданностей и всегда использовать универсальные, совместимые с ХМІ_ ООМ методы, то это — деІАНгіЬиіе и 
зеІАіігіЬиіе. Они могут быть использованы следующим образом: 

// Получение атрибута 

ісі ( "еѵегуиЬеге" ) . дебАббгіЪибе ( "ісі") 

// Установка значения атрибута 

Сад ("іприб")[0].зебАббгіЬибе("ѵаіие","Уоиг Лате"); 


В дополнение к этой стандартной паре деІАіІхіЬиІіе-зеІіАйпЬиІе, НТМІ. ООМ-документы обладают 
специальным набором свойств, которые работают с атрибутами в качестве быстрых извлекателей-установщиков. 
Они доступны во всех современных реализациях ООМ (но гарантированно работают лишь в НТМІ_ ООМ- 
документах), поэтому их использование может дать вам большие преимущества в написании компактного кода. В 
следующем коде показывается, как можно использовать свойства ООМ доступа к ООМ-атрибутам и установки их 
значений: 

// Быстрое получение атрибута 
Сад( "іприб" )[0] .ѵаіие 

// Быстрая установка значения атрибута 
Сад ( "сііѵ" ) [0] .ісі = "шаіп"; 

При работе с атрибутами существует несколько странных случаев, о которых вы должны знать. Один из 
них чаще всего возникает при доступе к атрибуту имени класса. Чтобы работать с именами классов одинаково на 
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всех браузерах, нужно использовать для обращения к ним свойство сІа55№те, используя выражение 
еІет.сІавзЫате, и не использовать более соответствующее по названию выражение деГАГГгіЬиГе("сІа55"). Такая же 
проблема возникает и с атрибутом Гог, который был переименован в ГіГтІРог. К тому же существуют проблемы и 
двумя С55-атрибутами: свзРІоаГ и свзТехГ. Это своеобразное соглашение об именах возникло из-за того, что такие 
слова, как сіазз, Гог, ГІоаГ и ГехГ являются в ІаѵаЗсгірГ зарезервированными словами. 

Чтобы обойти все эти странные случаи и упростить весь процесс работы с получением и установкой 
нужных атрибутов, нужно воспользоваться функцией, которая возьмет для вас все эти заботы на себя. В 
листинге 5.18 показывается функция для получения и установки значений атрибутов элементов. Вызов этой 
функции с двумя параметрами, к примеру, аГГг(еІетепГ, іб), приведет к возврату значения указанного атрибута. 
Если вызвать функцию с тремя параметрами, к примеру, аГГг(еІетепГ, сіазз, ГезГ), то будет установлено значение 
атрибута и возвращено его новое значение. 

Листинг 5.18. Получение и установка значений атрибутов элементов 

Гипсбіоп аббг (еіет, паше, ѵаіие) { 

// Гарантирование допустимости предоставленного имени 
іГ ( !паше || паше.сопзбгисбог != Збгіпд ) гебигп ''; 

// Определение, не относится ли это имя к тем самым «роковым» 

// именам 

паше = { 'Гог': ЧтбтІГог', ’сіазз': 'сІаззЛате' }[пате] || пате; 

// Если пользователь устанавливает значение, то также 
ІГ ( СуреоГ ѵаіие != ' ипсІеГіпесІ ' ) { 

// сначала установить быстрый способ 
е1еш[пате] = ѵаіие; 

// По возможности воспользоваться зебАббгіЬибе 
іГ ( еіеш.зебАббгіЬибе ) 

еіет.зебАббгіЬибе (пате, ѵаіие); 

} 


// Вернуть значение атрибута 

гебигп е1еш[паше] || еіет.дебАббгіЬибе (пате) || '' 


Наличие стандартного способа для доступа к атрибутам и их изменения, независимо от их реализации, 
является довольно мощным инструментом. В листинге 5.19 показано несколько примеров использования функции 
аГГг в некоторых часто встречающихся ситуациях для упрощения работы с атрибутами. 

Листинг 5.19. Использование функции аГГг для установки и извлечения значений атрибутов из ЭОМ- 
элементов 

// Установка атрибута сіазз для первого <Ы>-элемента 
аббг ( бадС'Ы") [0], "сіазз", "Ьеабег" ); 

// Установка значения для каждого элемента <іприб> 
ѵаг іприб = Гад( "іприб" ); 
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іог ( ѵаг і = 0; і < іприб. Іепдбіі; і++ ) { 

аббг ( іприб[і], "ѵаіие", "" ); 

} 

// Добавление обрамления к элементу <іприб>, у которого атрибут паше 
// имеет значение 'іпѵаіісі' 
ѵаг іприб = бад("іприб"); 

Дог ( ѵаг і = 0; і < іприб.ІепдбЬ; і++ ) { 

ІД ( аДДг ( іприД[і], "паше" ) == 'іпѵаіісі' ) { 

іприб[і].збуіе. Ъогбег = "2рх зоіісі геб"; 

} 

} 


До сих пор я рассматривал обычно используемые в ООМ атрибуты (например, Ю, сіазз, пате и т.д.), 
значение которых можно получать и устанавливать. Но технология установки и получения нетрадиционных 
атрибутов была бы тоже очень полезна. К примеру, вы можете добавить новый атрибут (который будет виден 
только при доступе к ООМ-версии элемента) а затем, чуть позже, снова его извлечь, и все это без модификации 
физических свойств документа. Предположим, к примеру, что вам нужен список элементов с их определениями, в 
котором по щелчку на элементе ему давалось бы развернутое определение. Код НТМІ_ для этой конструкции 
имел бы вид, показанный в листинге 5.20. 

Листинг 5.20. НТМД-документ со списком определений, скрытых от просмотра 


<Ьбт1> 

<ііеаб> 

<ДіД1е>Раскрываемый список определений</ДіД1е> 

<зДуіе>бб { бізріау: попе; }</збу1е> 

</ііеаб> 

<Ьобу> 

<Ы>Раскрываемый список определений</Ы> 

< 61 > 

<6ДЖоты</6Д> 

<бб>Пушистые, дружелюбные создания.</бб> 

<бД>Собака</бД> 

<бб>Любят заигрывать и крутиться вокруг человека.</бб> 

<бД>Мыши</6Д> 

СбсІЖоты любят их есть.</бб> 

</б1> 

</Ьобу> 

</ЬДш1> 

Подробности, касающиеся событий, будут рассмотрены в главе 6, а пока я попытаюсь сохранить простоту 
нашего кода обработки событий. Далее следует небольшой сценарий, позволяющий щелкать на определяемых 
терминах и показывать (или скрывать) их определения. Этот сценарий должен быть включен в заголовок вашей 
страницы или в этот заголовок должен быть включен внешний файл с этим сценарием. В листинге 5.21 показан 
код, необходимый для построения раскрываемого списка определений. 


Листинг 5.21. Сценарий, позволяющий осуществлять динамическое включение и выключение определений 
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// Ожидание готовности БОМ к работе 
ботКеабу ( бипсбіоп () { 

// Поиск всех определяемых терминов 
ѵаг сП; = Сад ( "сП;" ) ; 

бог ( ѵаг і = 0; і < бб.ІепдбЬ; і++ ) { 

// Отслеживание щелчка пользователя на термине 
аббЕѵепб( бб[і], "сііск", бипсбіоп () { 

// Проверка, раскрыто определение или нет 
ѵаг ореп = аббг ( ббіз, "ореп" ); 

// Переключение отображения определения 

пехб ( бЫз ) . збуіе . бізріау = ореп ? 'попе' : 'Ыоск'; 

// Запоминание того, что определение раскрыто 
аббг ( бЬіз, "ореп", ореп ? '' : 'уез' ); 

}) ; 

} 

}) ; 


Теперь, когда вы знаете, как перемещаться по ООМ, и как исследовать и изменять атрибуты, нужно 
изучить, как создавать новые ООМ-элементы, вставлять их куда угодно, и удалять те элементы, которые уже не 
нужны. 

Модификация йОМ 

Зная, как модифицировать ЭОМ, вы можете делать все, от создания налету собственных ХМб-документов 
для построения динамических форм, которые приспосабливаются к пользовательскому вводу; вы обретаете 
практически безграничные возможности. Модификация ЭОМ постигается в три этапа: сначала нужно изучить, как 
создавать новый элемент, потом нужно изучить, как его вставлять в ООМ, а затем нужно изучить как его оттуда 
извлечь. 

Создание узлов с использованием ООМ 

Основной метод, стоящий за модификацией ООМ, состоит в использовании функции сгеаіеЕІетепІ:, 
которая дает возможность создания нового элемента на лету. Но этот новый элемент при создании не вставляется 
немедленно в ООМ (что часто ставит в тупик тех, кто только начинает работать с ООМ). Сначала я сосредоточу 
внимание на создании ООМ-элемента. 

Метод сгеаІіеЕІетепІ: принимает один параметр, название тега элемента, и возвращает виртуальное ООМ- 
представление этого элемента — без каких-либо включенных в него атрибутов или стилевых установок. Если вы 
разрабатываете приложение, использующее сгенерированные с помощью Х5И ХНТМІ_-страницы (или ХНТМІ_- 
страницы, снабженные точным типом контента), то вам нужно помнить, что вы фактически используете ХМІ_- 
документ, и что ваши элементы нуждаются в наличии связанного сними соответствующего пространства имен 
ХМІ_. Чтобы беспроблемно обойти это обстоятельство, у вас должна быть простая функция, которая сможет 
спокойно протестировать, имеет ли используемый вами НТМб РОМ-документ возможность создания новых 
элементов с пространством имен (свойство, присущее ХНТМб йОМ-документам). Если дело обстоит именно таким 
образом, вы можете создать новый ООМ-элемент с соответствующим пространством имен ХНТМб, как это показано 
в листинге 5.22. 
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Листинг 5.22. Универсальная функция для создания нового йОМ-элемента 

Іипсбіоп сгеаСе( еіеш ) { 

геСигп сіосишепС . сгеаСеЕІешепСЛЗ ? 

сіоситепС . сгеаСеЕІешепСЛЗ ( 'ЬССр : //ими . м3. огд/1999/хЫ:т1', еіеш ) : 

сІоситепС . сгеаСеЕІетепС ( еіеш ); 


Используя предыдущую функцию, вы можете, к примеру, создать простой <йіѵ>-элемент и присоединить к 
нему дополнительную информацию: 

ѵаг сііѵ = сгеабе ("сііѵ") ; 
сііѵ. сІаззЛаше = "іСешз"; 
сііѵ.ісі = "аіі" ; 

В дополнение нужно заметить, что существует ООМ-метод, предназначенный для создания новых 
текстовых узлов, который называется сгеаіеТехіІМосіе. Он принимает единственный аргумент, текст, который 
должен появиться внутри узла, и возвращает созданный текстовый узел. 

Теперь, используя только что созданные ООМ-элементы и текстовые узлы, вы можете вставить их в ЭОМ- 
документы, именно туда, где они нужны. 

Вставка в РОМ 

Вставка в ЭОМ — дело весьма непростое, и временами вставит в тупик даже опытных пользователей ООМ. 
Для его осуществления в арсенале разработчиков есть две функции. 

Первая из них, іпзегІіВеГоге, позволяет вставлять элемент перед следующим дочерним элементом. При ее 
использовании это выглядит примерно следующим образом: 

родительскийУзелПредыдущегоУзла. іпзегСВебоге ( вставляемыйУзел, 

предыдущийУзел ); 

Мнемоническое правило, которое я использую, чтобы запомнить порядок следования аргументов 
выражается фразой: «Вставляем первый элемент перед вторым». Совсем скоро я покажу вам более простой 
способ, как это запомнить. 

Теперь, имея в своем распоряжении функцию для вставки узлов (речь идет как об элементах, так и о 
текстовых узлах) перед другими узлами, вы можете задаться вопросом: «А как же вставить узел в качестве 
последнего дочернего узла?». Для этого существует другая функция под названием аррепбСЫИ, позволяющая 
выполнить эту задачу. Функция аррепсІСІпіІсі вызывается для элемента, добавляемого к определенному узлу в 
самый конец списка его дочерних узлов. Использование этой функции выглядит следующим образом: 

родительскийЭлемент . аррепсІСЫІсІ ( вставляемыйУзел ); 

Чтобы избавиться от необходимости вспоминать конкретный порядок аргументов в функциях іпвегШеГоге и 
аррепйСЫИ, можно воспользоваться двумя вспомогательными функциями, которые были созданы мной для 
решения этой проблемы. Использование новых функций показано в листингах 5.23 и 5.24, в них порядок вызова 
аргументов дается относительно того узла (элемента), в который производится вставка, после чего указывается 
вставляемый элемент (узел). Дополнительно функция ЬеГоге позволяет предоставить необязательный 
родительский элемент, что потенциально приводит к сокращению кода. И наконец, обе эти функции позволяют 
передавать им сроку для вставки (дополнения), которая будет автоматически превращена для вас в текстовый 



102 


узел. Рекомендуется, чтобы родительский элемент передавался в виде ссылки (на тот случай, если он имеет 
значение пиІІ). 


Листинг 5.23. Функция для вставки элемента перед другим элементом 


Типсісіоп ЪеТоге( рагепб, ЪеТоге, еіеш ) { 

// Выяснение, предоставлен ли родительский (рагепб) узел 
іТ ( еіеш == пиІІ ) { 

еіеш = ЪеТоге; 

ЪеТоге = рагепб; 

рагепб = ЪеТоге .рагепкііосіе; 

} 

рагепб.іпзегбВеТоге( сііескЕ1еш( еіеш ), ЪеТоге ); 


Листинг 5.24. Функция добавления элемента в качестве дочернего к другому элементу 

Типсбіоп аррепсі ( рагепб, еіеш ) { 

рагепб . аррепсІСЫІсІ ( сііескЕ1ет( еіеш ) ); 

} 


Вспомогательная функция, показанная в листинге 5.25 облегчает вам вставку как элемента, так и текста 
(который автоматически превращается в нормальный текстовый узел). 

Листинг 5.25. Вспомогательная функция для функций Ьеіоге и аррепсі 


Типсбіоп сііескЕ1ет( еіеш ) { 

// Если предоставлена только строка, превращение ее в текстовый узел 
гекигп еіеш && еіеш. сопзкгиског == Зкгіпд ? 
сіоситепк . сгеакеТехкЛосІе ( еіеш ) : еіеш; 

} 


Теперь, используя функции Ьеіоге и аррепсі, и создавая новые ООМ-элементы, вы можете пополнять ООМ 
информацией, доступной для пользовательского просмотра (см. листинг 5.26). 

Листинг 5.26. Использование функций аррепсі и ЬеГоге 


// Создание нового <1і>-элемента 
ѵаг 1і = сгеаке( "1і" ); 
аккг( 1І, "сіазз", "пем" ); 

// Создание текстового содержимого и добавление его к <1і> 
аррепсі ( 1І, "Спасибо за то, что вы посетили наш сайт!" ); 

// Добавление <1і> в верхнюю строку первого упорядоченного списка 
Ьебоге ( Тігзб ( Сад ("оі") [0] ), 1і ); 


// Запуск этого оператора превратит пустой элемент <о1> 
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<ОІХ/о1> 

II в следующий: 

<о1> 

<1І с1аз5='пем'>Спасибо за то, что вы посетили наш сайт!</1і> 
</о1> 


Как только вы вставите эту информацию в ООМ (используя либо іпзегІіВеГоге, либо аррепсЮЫИ) она будет 
тот час же выведена на экран на обозрение пользователя. Поэтому вы можете воспользоваться этим 
обстоятельством для предоставления мгновенного отклика на его действия. Это особенно полезно для 
интерактивных приложений, в которых требуется пользовательский ввод. 

Теперь, посмотрев как создавать и вставлять узлы с применением исключительно ООМ-методов, будет 
особенно полезно посмотреть на альтернативные методы вставки в ООМ какого-нибудь содержимого. 

Вставка в РОМ кода НТМІ_ 

Технология непосредственной вставки НТМІ. в документ имеет даже большую популярность, чем создание 
и вставка в ООМ обычных ООМ-элементов. Проще всего для этого воспользоваться упоминавшимся ранее 
методом тпегНТМЬ. Вдобавок к тому, что он является способом извлечения НТМІ-, находящегося внутри элемента, 
он также предоставляет способ установки НТМІ внутри элемента. В качестве примера простоты его использования 
давайте представим, что у нас есть пустой элемент <оІ>, к которому нужно добавить несколько элементов <ІІ>. 
Код, выполняющий это действие, может выглядеть следующим образом: 

// Добавление нескольких Ы к ОЬ-элементу 

СадС'оІ") [ 0 ] . іппегНТМЬ = "<1і>Коты.</1і><1і>Собаки.</1іХІі>Мыши.</1і>"; 

Правда же, это намного проще, чем упорно создавать несколько ООМ-элементов и связанные с ними 
текстовые узлы? Вас может также обрадовать известие (соответствующее информации на бКр ://ѵѵѵѵѵѵ. 
циігкзтойе.огд) что этот способ еще и быстрее работает, чем использование методов ООМ. Но, не все так 
безоблачно — еще существует ряд коварных проблем, возникающих при использовании метода вставки 
іппегНТМІ.: 

• Как уже ранее упоминалось, метод ІппегНТМІ. отсутствует ХМІ_ ООМ-документах, значит, в этих документах 
вам придется и дальше пользоваться традиционными ООМ-методами создания узлов и элементов. 

• ХНТМІ_-документы, созданные с использованием Х5І.Т, который находится на стороне клиента, не имеют 
метода ІппегНТМІ, поскольку они тоже относятся к ХМ І_-доку ментам. 

• Метод іппегНТМІ полностью удаляет любые узлы, которые уже существуют внутри элемента, значит, 
способ последовательного добавления или вставки впереди существующего содержимого, существующий в 
ООМ-методах, в нем отсутствует. 

Последний пункт особенно огорчает, поскольку вставка впереди или добавление к концу дочернего списка 
другого элемента — весьма полезное свойство. И все-таки, применив магию ООМ, вы можете приспособить наши 
методы аррепсі и ЬеГоге для работы с обычными НТМІ_-строками в дополнение к работе с обычными ООМ- 
элементами. Перемены осуществляются в два этапа. Сначала создается новая функция сМескЕІет, показанная в 
листинге 5.27, которая способна обрабатывать НТМІ_-строки, ООМ-элементы и массивы ООМ-элементов. 

Листинг 5.27. Преобразование массива, представляющего смесь из ООМ-узлов и НТМІ_-строк в настоящий 
массив ООМ-узлов 

Типсбіоп сЬескЕІеш (а) { 

ѵаг г = []; 
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// Превращение аргумента в массив, если он еще им не является 
іГ ( а.сопзГгисГог != Аггау ) а = [ а ]; 

Гог ( ѵаг і = 0; і < а.ІепдГЬ; і++ ) { 

// Если это строка 

ІГ ( а[і].сопзГгисГог == ЗГгіпд ) { 

// Создание временного элемента для помещения в него НТМЬ 
ѵаг сііѵ = ЬоситепГ . сгеаГеЕІетепГ ("сііѵ") ; 

// Вставка НТМЬ, для превращения его в ВОМ-структуру 
сііѵ. іппегНТМЬ = а[і]; 

// Обратное извлечение ВОМ-структуры из временного ВІѴ-элемента 
Гог ( ѵаг ^ =0; ^ < сііѵ. сіііІсШосІез. ІепдГЬ; ^++ ) 
г[г.1епдГЬ] = сііѵ. сіііІсШосІез [ ^ ] ; 

} еізе іГ ( а[і].ІепдГП ) { // Если это массив 

// Предположение, что это массив ВОМ-узлов 
Гог ( ѵаг ^ = 0; ^ < а[і].ІепдГН; ^++ ) 
г[г.1епдГіі] = а[і] [;]]; 

} еізе { // Иначе, предположение, что это БОМ-узел 
г [г. ІепдГіі] = а[і]; 

} 

} 

геГигп г; 


Затем, как показано в листинге 5.28, нужно приспособить две функции вставки к работе с этой 
модификацией сЬескЕІет. 

Листинг 5.28. Усовершенствованные функции для вставки и добавления в ООМ 

ГипсГіоп ЬеГоге( рагепГ, ЬеГоге, еіеш ) { 

// Выяснение, предоставлен ли родительский (рагепГ) узел 
іГ ( еіеш == пиіі ) { 

еіеш = ЬеГоге; 

ЬеГоге = рагепГ; 

рагепГ = ЬеГоге .рагепГИоЬе; 

} 

// Получение нового массива элементов 
ѵаг еіешз = сііескЕ1еш( еіеш ); 

// Обратный перебор элементов массива, 

// поскольку мы добавляем элементы к началу 
Гог ( ѵаг і = еіешз.ІепдГП - 1; і >= 0; і-- ) { 

рагепГ.іпзегГВеГоге( еіешз[і], ЬеГоге ); 

} 


} 
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РипсРіоп аррепсі ( рагепр, еіеш ) { 

// Получение массива элементов 
ѵаг еіешз = сііескЕ1ет( еіеш ); 

// Добавление всех элементов к родительскому элементу 
Дог ( ѵаг і = 0; і <= еіешз.ІепдРП; і++ ) { 

рагепр . аррепс1СЫ1с1 ( еіешз [і] ); 

} 

} 


Теперь, с использованием этих новых функций, добавление <ІІ> в упорядоченный список становится 
невероятно простой задачей: 

аррепсі ( РадС'оІ") [0], "<1і>Мышеловка . </1і>" ); 

// Выполнение этой простой строки может добавить дополнительный НТМЬ в этот <о1>-список 

<ОІ> 

<1і>Коты.</1і> 

<1і>Собаки . </1і> 

<1і>Мыши.</1і> 

</о1> 

// превращая его в следующий список: 

<о1> 

<1і>Коты.</1і> 

<1і>Собаки.</1і> 

<1і>Мыши.</1і> 

<1і>Мышеловки.</1і> 

</о1> 

// А выполнение простого оператора, использующего функцию ЬеДоге 
ЬеДоге ( ІазР ( РадС'оІ") [0] ), "<1і>3ебры.</1і>" ); 

// Превратит <о1> в: 

<о1> 

<1іЖоты.</1і> 

<1і>Собаки.</1і> 

<1і>3ебры.</1і> 

<1і>Мыши.</1і> 

</о1> 


Благодаря применению этой технологии ваш код становиться намного компактнее и пригоднее к 
разработке. А если вам захочется развернуться в обратную сторону, и удалить узлы из БОМ? Как всегда, для 
этого найдется другой метод. 

Удаление узлов из ЭОМ 

Удаление узлов из БОМ случается едва ли не чаще, чем их создание и вставка. К примеру, при создании 
динамической формы, запрашивающей ввод неограниченного количества элементов, становится важным 
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разрешить пользователям удалять ту часть страницы, с которой они больше не желают работать. Возможность 
удаления узла заложена в одну функцию: гетоѵеСНіІсІ. Она используется точно также, как и функция 
аррепйСЫИ, но имеет обратный эффект. Ее использование выглядит примерно так: 

РодительскийУзел. гетоѵеСЬіІсІ ( УдаляемыйУзел ); 

С расчетом на нее, вы можете создать две отдельные функции для быстрого удаления узлов. Одна из них 
показана в листинге 5.29. 

Листинг 5.29. Функция для удаления узла из ООМ 

// Удаление из БОМ отдельного узла 
бипсЬіоп гешоѵе ( еіеш ) { 

іб ( еіеш ) еІет.рагепбЛосІе. гетоѵеСЬіІсІ ( еіеш ); 

} 


В листинге 5.30 показана функция для удаления из элемента всех дочерних узлов, в которой используется 
только одна ссылка на ООМ-элемент. 

Листинг 5.30. Функция для удаление из элемента всех дочерних узлов 

// Удаление из БОМ всех дочерних узлов элемента 
бипсбіоп етрбу( еіеш ) { 

иЫІе ( еіеш. бігзбСЬіІсІ ) 

гешоѵе ( еіеш. бігзбСЬіІсІ ); 

} 


Представим, к примеру, что вам нужно удалить тот элемент <ІІ>, который вы добавили в предыдущем 
разделе, предполагая, что вы дали пользователю возможность как следует рассмотреть этот <1і>, и он может быть 
удален без всяких последствий. Следующий пример показывает, что для получения желаемого результата вы 
можете воспользоваться кодом ІаѵаЗсгірі: 

// Удаление последнего <1і> из <о1> 
гешоѵе ( Іазб ( ЬадС'оІ") [0] ) ) 

// Приведенный выше код превратит этот фрагмент: 

<о1> 

<1і>Учите Баѵазсгірб . </1і> 

<1і>???</1і> 

<1і>Получите прибыль!</1і> 

</о1> 

// в этот : 

<ОІ> 

<1і>Учите Баѵазсгірб.</1і> 

<1і>???</1і> 

</о1> 

// Если бы мы запустили вместо функции гешоѵе() функцию ешрбу() 
ешрбу ( Іазб ( бадС'оІ") [0] ) ) 
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// То остался бы просто пустой список <о1>: 

<ОІХ/о1> 

Изучив возможность удаления узла из ЭОМ, вы завершили освоение урока о том, как работает объектная 
модель документа, и как из этого можно извлечь для себя наибольшую выгоду. 

Вывод 

В этой главе я рассмотрел многие вопросы, относящиеся к объектной модели документа. К сожалению, 
некоторые темы, к примеру, ожидание загрузки ООМ, оказались сложнее других, и их рассмотрение будет 
продолжено в обозримом будущем. Тем не менее, использование всего здесь изученного, позволит вам создавать 
практически любые динамические компоненты веб-приложений. 

Если вы желаете изучить некоторые примеры ООМ-сценариев в действии, просмотрите приложение А, в 
которое именно для этого включено множество дополнительного кода. Дополнительно, еще больше примеров 
создания ООМ-сценариев можно найти в Интернете, на веб-сайте книги по адресу: МЫрѴ^зрго.огд, или в разделе 
исходного кода и загрузки — Зоигсе Сосіе/Ооѵѵпіоасі на веб-сайте издательства Аргев5: Иі(:р://ѵѵѵѵѵѵ.арге55.сот. 
Далее я собираюсь привлечь ваше внимание к следующим компонентам ненавязчивого создания ЭОМ-сценарием: 
к событиям. 
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Глава 6События 

Наиболее важной стороной создания ненавязчивых ЭОМ-сценариев является использование динамически 
связанных событий. Конечная цель написания полезного кода ЗаѵаЗсгірІ: состоит в получении веб-страницы, 
работающей для пользователей, независимо от того, какой браузер они используют, или на какой платформе 
работают. Для достижения этой цели вы устанавливаете заданный набор свойств, которыми хотите 
воспользоваться, и исключаете все браузеры, которые их не поддерживают. Для браузеров, не поддерживающих 
эти свойства, вы предлагаете работоспособные, но менее интерактивные версии веб-сайта. Преимущества от 
такой организации взаимодействия ]аѵа5сгір1; и НТМІ_ включают более совершенный код, более понятные веб¬ 
страницы, и лучшее взаимодействие с пользователем. Всего этого можно достичь за счет использования событий 
ЭОМ для улучшения взаимодействия, происходящего в веб-приложениях. 

С годами понятие событий в ^ѵаЗсгірІ получало развитие, приближаясь к тому надежному, но 
полупригодному состоянию, в котором оно сейчас и находится. К счастью, благодаря существованию общих черт, 
вы можете разрабатывать замечательные инструменты, помогающие создавать мощные, безупречно написанные 
веб-приложения. 

В начале этой главы я собираюсь представить вам работу событий в ^ѵаБсгірІ: и сравнить ее с моделями 
событий, существующими в других языках программирования. Затем я собираюсь рассмотреть информацию, 
предоставляемую моделью событий, и лучшие способы ее контролирования. После того как будет рассмотрена 
привязка событий к ЭОМ-элементам и различные виды доступных событий, в заключение я покажу, как 
интегрировать некоторые эффективные и ненавязчивые технологии написания сценариев в любую веб-страницу. 

Введение в события ЗаѵаВсгірІ 

Если вы заглянете в основу любого кода За ѵа5сгі рЬ, то увидите, что события являются именно тем 
связующим элементом, который все и скрепляет. В хорошо спроектированном ^ѵа5сгір(:-приложении, вы 
стремитесь иметь источник данных и его визуальное представление (в НТМІ_ ООМ). Чтобы синхронизировать эти 
две стороны приложения, вам необходимо отслеживать все действия пользователя и, следовательно, его попытки 
обновить информацию на вашем веб-сайте. Сочетание использования событий ЭОМ и ЗаѵаЗсгірІ: является 
основным союзом, определяющим облик современных веб-приложений. 

Асинхронные события против потоков 

В ЗаѵаЗсгірІ используется весьма уникальная система событий. Она работает абсолютно асинхронно, 
вообще не используя потоков. Это означает, что весь код вашего приложения будет зависеть от каких-либо 
действий, например, от щелчка пользователя или загрузки страницы — что будет приводить к выполнению 
определенного кода. 

Основное отличие программ, спроектированных для работы с потоками от программ, спроектированных 
для работы с асинхронными событиями состоит в том, как происходит ожидание происходящего. В программах, 
рассчитанных на потоки, вы постоянно ведете проверку, пока не будут выполнены заданные вами условия. Тогда 
как в асинхронных программах вы просто регистрируете в качестве обработчика события функцию обратного 
вызова, а затем, когда наступит событие, обработчик даст вам знать, выполняя вашу функцию обратного вызова. 

Теперь посмотрим, как пишется программа ЭаѵаЗсгірІ;, если используются потоки, и как она пишется, если 
используются асинхронные обратные вызовы. 

Потоки .ІаѵаЗсгірі: 

На сегодняшний день в Эа ѵа5сгі рТ потоки не существуют. Самое близкое, что может быть использовано в 
этом качестве — функция обратного вызова зе1:Тітеои1:( ), но даже при этом модель будет далека от идеала. Если 
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ІаѵаЗсгірі был бы традиционным, работающим с потоками языком программирования, то что-либо подобное коду, 
приведенному в листинге 6.1 могло бы сработать. В данной имитации кода ведется ожидание, пока страница не 
будет полностью загружена. Если бы ІаѵаЗсгірі был потоковым языком программирования, то вам бы пришлось 
делать что-либо подобное. Хорошо, что до этого дело не доходит. 

Листинг 6.1. Ложный код ІаѵаЗсгірІ; для имитации потока 

// ПРИМЕЧАНИЕ: Этот код не работает! 

// Ожидание, пока страница не загрузится, путем осуществления постоянных 
// проверок 

мПіІе ( ! міпсіом . Іоасіесі () ) { } 

// Страница загружена, можно приступать к работе 

босшпепб . дебЕІетепбВуІсІ ("бобу") . збуіе . Ъогсіег = "Ірх зоіісі #000"; 

Если заметили, в этом коде используется цикл, в котором осуществляется постоянная проверка, какое 
значение возвращает ѵѵіпсіоѵѵ.Іоас1есІ( ), истинное или нет. Невзирая на факт отсутствия у объекта ѵѵіпсіоѵѵ5 метода 
Іоасіесі( ), давайте посмотрим, почему это не работает в ІаѵаЗсгірІ;. Это происходит из-за того, что все циклы в 
ІаѵаЗсгірі являются блокирующими (то есть пока они не закончат работу, ничего другого произойти не может). 
Ели бы ІаѵаЗсгірі был в состоянии обрабатывать потоки, то вы увидели бы что-либо, подобное изображенному на 
рис. 6.1. На этом рисунке имеющийся в вашем коде цикл ѵѵИіІе постоянно проверяет, не загрузилось ли окно. Но в 
ІаѵаЗсгірі это не работает из-за того, что все циклы в нем — блокирующие (поэтому никакие другие операции не 
могут быть выполнены, пока цикл работает). 


ѵѵЫІе (! ѵѵіпсіоѵѵ.ІоасІесіО ) {} 



Рис. 6.1. Вот что бы получилось, если бы ІаѵаБсгірі умел обрабатывать потоки 

На самом деле, поскольку наш цикл ѵѵбііе продолжает работать и блокировать нормальный ход 
выполнения приложения, то он никогда не получит истинное значение. В результате пользовательский браузер 
остановится и зависнет, что может привести к аварийному завершению работы. Из этого можно извлечь 
следующий урок: если кто-нибудь будет утверждать, что использует цикл ѵѵбііе для ожидания (в ІаѵаЗсгірі) 
окончания работающего процесса, то он либо лжет, либо сильно заблуждается. 

Асинхронные обратные вызовы 

Программной альтернативой использованию потоков для постоянной проверки обновлений является 
использование асинхронных обратных вызовов, что, собственно, и делается в ІаѵаЗсгірі. Используя простую 
терминологию, вы сообщаете ООМ-элементу, что при каждом возникновении события определенного вида, вы 
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хотите, чтобы для его обработки была вызвана функция. Это означает, что вы можете предоставить ссылку на 
код, который желательно в нужный момент выполнить, а браузер берет на себя всю заботу о деталях. В 
листинге 6.2. показан пример кода, в котором используется обработчик событий и обратный вызов. В нем вы 
увидите действующий код, необходимый для привязки функции к обработчику события (ѵѵіпсіоѵѵ.опіоасі) в 
іаѵаБсгірі. Обработчик ѵѵіпсІоѵѵ.опІоасі( ) будет вызван при каждом событии окончания загрузки страницы. Он 
также подойдет и для других общих событий, к примеру, для щелчка, перемещения мыши и щелчка на кнопке 
типа зиЬтіІ;. 

Листинг 6.2. Асинхронный обратный вызов в іаѵаБсгірІ: 

// Регистрация функции для вызова при каждой загрузке страницы 
иіпсіом . опіоасі = Іоасіесі; 

// Функция, вызываемая при каждой загрузке страницы, 
бипсбіоп Іоасіесі () { 

// Страница уже загружена, можно приступать к работе 

босшпепб . дебЕІетепбВуІсі ( "Ьосіу" ) . збуіе . Ьогсіег = "Ірх зоіісі #000"; 

} 


Если сравнить код в листинге 6.2 с кодом, показанным в листинге 6.1, будут видны явные различия. 
Немедленно выполняется только тот код, который привязан к обработчику события (функции Іоасіесі), к его 
перехватчику (свойству опіоасі). Как только страница будет полностью загружена, браузер вызывает функцию, 
связанную с ѵѵіпсіоѵѵ.опіоасі, и выполняет ее. Примерный ход работы кода ІаѵаБсгірІ показан на рис. 6.2. На 
рисунке изображено представление об использовании функции обратного вызова для ожидания в ІаѵаБспрі 
загрузки страницы. Поскольку ожидание здесь в принципе невозможно, вы регистрируете обратный вызов 
(Іоасіесі), который состоится при полной загрузке страницы, за обработчиком (ѵѵіпсіоѵѵ.опіоасі). 

Есть одно, не слишком очевидное обстоятельство, касающееся нашего простого перехватчика и 
обработчика, которое связано тем, что порядок событий может изменяться, и обработка может отличаться в 
зависимости от вида события и расположения элемента в структуре ООМ. В следующем разделе мы рассмотрим 
две различные фазы событий, и причины, которые вызывают эту разницу. 


ѵѵіпйоѵѵ.опіоасі = Іоасіесі; 



Фазы события 
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В ]аѵа5сгір1; события происходят в двух фазах, которые называются захватом (саріигіпд) и всплытием, 
подобно пузырькам (ЬиЬЫіпд). Это означает следующее: если событие происходит в отношении элемента (к 
примеру, пользователь щелкает на ссылке, вызывая тем самым событие щелчка), элементы, позволяющие его 
обработать, и порядок, в котором происходит обработка, варьируются. Порядок выполнения можно увидеть в 
примере на рис. 6.3. На этом рисунке показано, какие обработчики события задействуются и в каком порядке при 
каждом щелчке пользователя на первом <а>-элементе страницы. 


Саріигіпд 

/<ЬосІу> 

и,<*ѵ иі="Ьоау"> 


г. 

и- 


<иІ сІа55="Ііпкз"> 

<Іі> '«"Э 

<а ІігеІ="Г>Ноте</а> 

</Іі> 

<Ііха Нге(='УаЬоиІ/">АЬоиі</ах/Іі> 
</иІ> 


<иі си 


</йіѵ> 

</Ьойу> 


Рис. 6.3. Две фазы обработки события 

Если посмотреть на простой пример щелчка на ссылке (на рис. 6.3), можно увидеть порядок выполнения 
обработки события. Под тем предлогом, что пользователь щелкнул на элементе <а>, сначала срабатывает 
обработчик щелчка, принадлежащий элементу йоситепі:, затем обработчик, принадлежащий элементу <Ьобу>, 
затем обработчик, принадлежащий элементу <сііѵ>, и так далее, вплоть до элемента <а>; это называется фазой 
захвата. Как только это все завершится, процесс идет вспять, вверх по дереву, и срабатывают по порядку 
обработчики событий <1і>, <иІ>, < сііѵ> , <ЬосІу> и боситепС 

Существуют вполне конкретные причины, по которым обработка события построена именно таким 
образом, и почему все это превосходно работает. Рассмотрим простой пример. Предположим, вам нужно изменять 
цвет фона каждого <ІІ>-элемента при каждом прохождении над ним указателя мыши, и возвращать исходный 
цвет, когда указатель мыши уходит за пределы элемента — обычные запросы для многих систем меню. Именно 
эту задачу и выполняет код, показанный в листинге 6.3. 

Листинг 6.3. Сценарий обозначаемых перемещений с эффектами зависания 

// Обнаружение всех элементов <1і> для подключения к ним обработчиков 
// событий 

ѵаг 1і = босишепб. дебЕІешепбзВуТадЛаше ( "1і" ); 
бог ( ѵаг і = 0; і < Іі.ІепдбЬ; і++ ) { 


// Подключение к элементу <1і> обработчика события шоизеоѵег. 
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// который изменяет цвет фона <1і> на синий. 
1і [ і ]. оптоизеоѵег = бипсбіоп () { 

йіз . збуіе . ЬаскдгошкіСоІог = 'Ыие'; 

} ; 


// Подключение к элементу <1і> обработчика события, 
// который изменяет цвет фона <1і> на исходный белый 
1і[і]. огшюизеоиб = іипсбіоп() { 

бЫз . збуіе . ЪаскдгоипсІСоІог = 'икібе'; 

} ; 


Код ведет себя точно в соответствии с вашим представлением: при проходе указателя вашей мыши над 
элементом <ІІ>, его фоновый цвет изменяется; при выходе указателя за пределы элемента, цвет 

возвращается к исходному. Но при этом вы не понимаете, что при каждом прохождении указателя над <1і>, вы на 
самом деле периодически переключаетесь между двумя различными элементами. Поскольку элемент <ІІ> также 
содержит элемент <а>, вы перемещаете указатель мыши и над ним, а не только над <ІІ>. Взглянем на на точный 
ход возникновения событий: 

• <1і> тоизеоѵег: Указатель мыши находится над элементом <ІІ>. 

• <1і> тоизеоиб: Вы перемещаете его с <ІІ> на <а>, который находится внутри. 

• <а> тоизеоѵег: Теперь указатель мыши находится над элементом <а>. 

• <1і> тоизеоѵег: Событие тоизеоѵег, принадлежащее <а>, «всплывает» вверх к событию тоизеоѵег, 

принадлежащему элементу <ІІ>. 

Если вы по направлению возникновения событий заметили, что фаза захвата полностью проигнорирована, 
не переживайте, я о ней не забыл!:. Способ привязки перехватчиков событий заключается в использовании старых 
«традиционных» средств привязки событий за счет установки свойства элемента опеѵепЬ, которое поддерживает 
только всплытие, а не захват события. Этот способ привязки событий наряду с другими рассмотрен в следующем 
разделе. 

Вдобавок к странному порядку возникновения событий вы могли заметить два неожиданных действия: 
возникновение тоизеоиі: при выходе из <ІІ> и всплытие тоизеоѵег от <а> к <ІІ>. Рассмотрим это более 
подробно. 

Первое событие тоизеоиі: возникает из-за того, что с точки зрения браузера вы покинули пределы 
родительского элемента <ІІ> и переместились на другой элемент. Это происходит из-за того, что элемент, 
находящийся поверх других элементов (как элемент <а> по отношению к родительскому элементу <ІІ>) 
моментально получает фокус указателя мыши. 

Принадлежащее элементу <а> событие тоизеоѵег всплывает к родительскому элементу <ІІ>, бросая тем 
самым спасательный круг нашему фрагменту кода. Поскольку вы не привязали к элементу <а> никакого 
перехватчика, событие просто перемещается вверх по дереву ООМ в поиске другого элемента, имеющего 
перехватчик. И первым попавшимся элементом в этом процессе всплытия оказывается <ІІ>, который 
перехватывает входящие события тоизеоѵег (что, собственно, и требовалось). 
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Но тут возникает другой вопрос, что произойдет, если у элемента <а> будет собственный обработчик 
события тоизеоѵег? Существует ли какой-нибудь способ, который сможет остановить всплытие события? Эта 
важная и полезная тема будет рассмотрена в следующем разделе. 

Общие свойства событий 

Одной из сильных сторон событий ІаѵаБсгірі является наличие относительно совместимых свойств, 
которые дают в процессе разработки больше возможностей и средств управления. Самым простым и давним 
понятием является объект события, предоставляющий собой набор метаданных и контекстно-зависимых функций, 
позволяющих вам работать, к примеру, с событиями мыши и клавиатуры. Кроме этого существуют функции, 
которые можно использовать для изменения нормального хода захвата-всплытия события. Изучение этих свойств 
в полном объеме может значительно упростить вашу жизнь. 

Объект события 

Стандартным свойством обработчиков событий является способ обращений к объекту события, в котором 
содержится контекстно-зависимая информация о текущем событии. Для определенных событий этот объект 
служит очень ценным ресурсом. К примеру, при обработке нажатий клавиш можно получить доступ к свойству 
объекта кеуСобе и получить код нажатой клавиши. Более подробная информация, относящаяся к специфике 
объекта события, изложена в приложении Б. 

У объекта события есть одна сложность: его реализация в Іпіегпеі Ехріогег отличается от спецификации, 
предложенной ѴѴЗС. В Іпіегпеі Ехріогег имеется один глобальный объект события (который может быть 
гарантированно найден в глобальной переменной свойства ѵѵіпсіоѵѵ.еѵепі), тогда как в других браузерах имеется 
переданный им отдельный параметр, в котором содержится объект события. Пример гарантированного 
использования объекта события показан в листинге 6.4. Это пример изменения типичного поведения элемента 
<1ех(:агеа>. Обычно пользователи могут находясь в іехіагеа нажать клавишу Епіег, и вызвать появление 
дополнительного символа конца строки. А вместо этого нужно простое расширение текстового окна? Именно эту 
задачу и выполняет следующая функция. 

Листинг 6.4. Подмена выполняемой функции путем использования событий ЭОМ 

// Обнаружение на странице первого элемента <бехбагеа>, и привязка к нему 
// перехватчика нажатия клавиатуры 

боситепб. дебЕІешепбзВуТадЛаше ("бехбагеа") [0].опкеургезз = бипсбіоп (е) { 

// Если объект события отсутствует, использование глобальной 
// переменной (только для ІЕ) 
е = е | | ѵіпсіоѵ . еѵепб ; 

// Если нажата клавиша Епбег, вернуть баізе (то есть ничего не делать) 
гебигп е.кеуСобе != 13; 

} ; 


В объекте события содержится множество свойств и методов, их имена и поведение варьируются от 
браузера к браузеру. Сейчас я не хочу вдаваться в подробности, но настоятельно рекомендую прочесть 
приложение Б, в котором приведен большой список всех свойств объекта события, рассказано, как их 
использовать и приведены примеры использования. 

Ключевое слово Ыііз 

Ключевое слово 1МІ5 (как уже было рассмотрено в главе 2) служит способом обращения к текущему 
объекту внутри функции. При использовании ключевого слова ІЫз современные браузеры дают всем 



114 


обработчикам событий некоторый контекст. Но только часть этого контекста (и только в некоторых методах) 
работает должным образом и относится к текущему элементу; этот вопрос мы рассмотрим поглубже буквально 
через минуту. К примеру, в листинге 6.5, я могу воспользоваться этим обстоятельством только для того, чтобы 
создать одну универсальную функцию обработки щелчков, но не смогу использовать это ключевое слово, чтобы 
определить, какой элемент в данный момент обрабатывается. В листинге показан пример использования только 
одной функции для обработки события щелчка, но так как ключевое слово Ші5 в ней используется для ссылки на 
элемент, все будет работать должным образом. 

Листинг 6.5. Изменение цвета фона и переднего плана всех элементов <ІІ> по щелчку 

// Обнаружение всех элементов <1і> и привязка к каждому из них 
// обработчика щелчка 

ѵаг 1і = сіоситепк . декЕІетепкзВуТадЫате ("1і") ; 
бог ( ѵаг і = 0; і < Іі.ІепдкЬ; і++ ) { 

1і[і].опсііск = ЬапсНеСІіск; 

} 

// Обработчик щелчка при вызове изменяет цвет фона 
// и цвет переднего плана определенного элемента 
бипскіоп ЬапсІІеСІіск: () { 

кЫз . зкуіе . ЪаскдгоипсІСоІог = "Ыие"; 
кЫз . зкуіе . соіог = "иЬіке"; 

} 


Фактически ключевое слово Шіз предоставляет лишь некоторое удобство, однако, я полагаю, что вы 
согласитесь с тем, что при правильном использовании оно может существенно упростить код ІаѵаЗсгірІ:. Весь код, 
который связан в этой книге с событиями, я старался написать, используя это ключевое слово. 

Прекращение всплытия событий 

Теперь, когда вы уже знаете как работают захват и всплытие событий, давайте исследуем вопросы 
управления этими процессами. В одном из предыдущих примеров был поднят важный вопрос: если вам нужно 
будет, чтобы событие произошло только для заданного элемента и не касалось его родительских элементов, то 
способов остановки процесса у нас пока нет. Остановка всплытия события ситуацию, изображенную на рис. 6.4, в 
которой показан результат захвата события первым элементом <а> и прекращения последующего всплытия. 
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Рис. 6.4. Результат захвата события первым элементом <а> 

Остановка всплытия (или захвата) события может стать исключительно полезной в сложных приложениях. 
К сожалению, Іпііегпеі: Ехріогег предлагает иной способ остановки всплытия события, чем все остальные браузеры. 
Универсальная функция прекращения всплытия события показана в листинге 6.6. Она принимает единственный 
аргумент: объект события, переданный в обработчик события. Функция отрабатывает два разных способа 
прекращения всплытия события: стандартный ѴѴЗС-способ, и нестандартный способ, принадлежащий Іпііегпеі: 
Ехріогег. 

Листинг 6.6. Универсальная функция для остановки всплытия события 

бипсбіоп зборВиЪЫе (е) { 

// Если предоставлен объект события, значит это не ІЕ-браузер 
іб ( е && е. зборРгорадабіоп ) 

// и он поддерживает КЗС-метод зборРгорадабіоп () 
е. зборРгорадабіоп (); 
еізе 

// В противном случае нужно воспользоваться способом 
// прекращения всплытия события, существующим в Іпбегпеб Ехріогег 
иіпсіом . еѵепб . сапсеІВиЬЫе = бгие; 

} 


Теперь вы , наверное, хотите спросить, когда я хочу остановить всплытие события? По правде говоря, в 
большинстве случаев вам не придется об этом волноваться. Потребности в этом возникнут, когда вы начнете 
разрабатывать динамические приложения (особенно те, которые работают с клавиатурой или мышью. В 
листинге 6.7 показан небольшой фрагмент, который добавляет красное обрамление вокруг текущего элемента, на 
которым вы проносите указатель мыши. Это достигается добавлением обработчиков событий тои5еоѵег и 
тоиБеоиІ: к каждому ЭОМ-элементу. Если вы не остановите всплытие события, то при каждом проходе указателя 
мыши над элементом красное обрамление будет получать как сам элемент, так и все его родительские элементы, 
что не соответствует вашему желанию. 
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Листинг 6.7. Использование 5(;орВиЬЫе() для создания интерактивного набора элементов 

// Обнаружение и проход по всем элементам, имеющимся в БОМ 
ѵаг аіі = боситепб. дебЕІешепбзВуТадЛаше ("*"); 
бог ( ѵаг і = 0; і < аІІ.ІепдбЬ; і++ ) { 

// Отслеживание прохода указателя мыши над элементом 
// и добавление к элементу красного обрамления 
аіі [ і ] . оптоизеоѵег = бипсбіоп(е) { 

бЫз . збуіе . Ъогбег = "Ірх зоіісі геб"; 
зборВиЬЫе ( е ) ; 

} ; 

// Отслеживание выхода указателя мыши за пределы элемента 
// и удаление ранее добавленного обрамления 
аіі [ і ] . огшюизеоиб = бипсбіоп(е) { 

Шз . збуіе . Ъогбег = "Орх"; 
зборВиЬЫе ( е ) ; 

} ; 

} 


Теперь, имея возможность остановить всплытие события, вы получаете полное управление над тем, какой 
именно элемент занимается отслеживанием и обработкой события. Это основной инструмент исследования 
разработки динамических веб-приложений. Теперь остается только отключить исходные действия браузера, что 
позволит вам подменять все, что он делает и реализовать вместо этого новые функциональные возможности. 

Подмена исходных действий браузера 

Для большинства имеющихся событий у браузера есть некоторые исходные действия, которые всегда им 
совершаются. К примеру, щелчок на элементе <а> перенесет вас на связанную с ним веб-страницу; это исходное 
действие браузера. На рис. 6.5 показано, что оно всегда будет совершаться после обеих фаз захвата и всплытия. 
В этом примере показаны результаты пользовательского щелчка на имеющимся на веб-странице элементе <а>. 
Событие, как уже ранее говорилось, начинается с путешествия по ООМ в обеих фазах: захвата и всплытия. Но 
только как элемент будет пройден, браузер попытается выполнить свое исходное действие для этого события и 
элемента. В данном случае, посетить страницу, обозначенную как /. 
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Рис. 6.5. Полный жизненный цикл события 

Исходные действия могут быть сведены в понятие всего, что делается браузером без вашего на то 
конкретного указания. Рассмотрим примеры разного рода совершаемых исходных действий, и событий, по поводу 
которых это происходит: 

• Щелчок на элементе <а> перенаправит вас на ІЖІ_, предоставленный в его атрибуте ІтгеГ. 

• Нажатие на клавиатуре сочетания С1:гІ+5, приведет к попытке браузера сохранить физическое 
представление веб-сайта. 

• Отправка НТМІ_ <1югт> приведет к передаче данных запроса на определенный ІЖІ_ и перенаправлению 
браузера по указанному адресу. 

• Перемещение указателя мыши над элементом изображения — <ітд>, имеющим атрибут аII: или Ш:1е (в 
зависимости от браузера) приведет к появления подсказчика, предоставляющего описание изображения. 

Все ранее перечисленные действия будут выполняться браузером даже если вы остановите всплытие 
события, или у вас вообще не будет привязано к элементу никакого обработчика события. Это может привести в 
ваших сценариях к значительным проблемам. Что делать, если вам нужно задать передаваемой форме иное 
поведение? Или если нужно, чтобы элемент <а> вел себя не так, как предписано его предназначением? Ведь 
воспрепятствовать всплытию события для того, чтобы предотвратить исходные действия будет не достаточно, вам 
понадобится некий особенный код, который будет непосредственно управлять этим процессом. Как и в случае с 
отменой всплытия, есть два способа остановки исходных действий: особый ІЕ-способ, и способ, предусмотренный 
ѴѴЗС. Оба эти способа показаны в листинге 6.8. Приведенная в нем функция принимает один аргумент: объект 
события, передаваемый в обработчик события. Эта функция может быть использована в самом конце обработчика 
события, таким вот образом: геііигп зіорОеГаиЩ е ); —поскольку ваш обработчик тоже должен возвратить ЩІ5е 
(который теперь вернет для вас функция зІорЭеІдиІІ:). 

Листинг 6.8. Универсальная функция для предотвращения исходных действий браузера 

бипсбіоп зборБебаиИ: ( е ) { 

// Предотвращение исходных действий браузера (ИЗО) 
іб ( е && е. ргеѵепбОебаиІІ: ) 
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е . ргеѵепбОе баи 16 () ; 

// Ссылка на остановку действия браузера в ІЕ 
еізе 

иіпсіом. еѵепб . гебигпѴаІие = баізе; 

гебигп баізе; 


Теперь, используя функцию БіорОе^аиІІ;, вы можете остановить любое исходное действие, предоставляемое 
браузером. Как показано в листинге 6.9, это позволит вам задать в сценарии вполне определенную реакцию на 
действия пользователя. Код делает так, чтобы все имеющиеся на странице ссылки загружались в отдельном 
элементе <ІІтате>, а не в открываемой целиком новой странице. Это позволит вам удержать пользователя на 
странице, и дать ему возможность более интерактивного взаимодействия. 

ПРИМЕЧАНИЕ 

Предотвращение исходный действий во всех необходимых случаях работает на 95%. Все усложняется при 
перемещении от браузера к браузеру, из-за того, что предотвращение исходного действия зависит от самого 
браузера (они не всегда все делают правильно), особенно при работе с предотвращением действий, вызванных 
нажатием клавиш в текстовых полях, и с предотвращением действий внутри элементов <і(тате>; во всех 
остальных случаях все должно проходить более-менее гладко. 

Листинг 6.9. Использование 5(:орОеГаиИ:() для подмены функциональных действий браузера 

// Предположим, на странице уже есть элемент Ібгате, 

// и его ІБ имеет значение ' ібгате' 

ѵаг ібгате = босшпепб . дебЕІетепбВуІсІ ("ібгате") ; 

// Обнаружение на странице всех элементов <а> 
ѵаг а = босшпепб .дебЕІешепбзВуТадЛаше("а"); 
бог ( ѵаг і = 0; і < а.ІепдбН; і++ ) { 

// Привязка к <а> обработчика щелчка 
а[і].опс1іск = бипсбіоп(е) { 

// Установка места нахождения ІЕгаше 
ібгаше.згс = бЫз.Пгеб; 

// Предотвращение любых посещений из браузера веб-сайтов, на которые 
// указывают элементы <а> (что является исходным действием) 
гебигп зборБебаиІб ( е ); 

} ; 

} 


Подмена исходных действий — неразрывное сочетание йОМ и событий, которые объединяются в форме 
ненавязчивого создания ЭОМ-сценариев. Чуть позже, в разделе «Создание ненавязчивых ООМ-сценариев», я 
поговорю об этом с функциональной точки зрения. Тем не менее, не все так гладко; основные разногласия 
возникают, когда приходит время заняться привязкой ваших обработчиков событий к ЭОМ-элементам. Фактически 
существуют три различных способа привязки событий, одни хуже, другие лучше, и все они будут рассмотрены в 
следующем разделе. 


Привязка перехватчиков событий 
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Привязка обработчиков событий к элементам была в ІаѵаЗсгірІ постоянно развивающимся предметом 

поиска. 


Все началось с браузеров, вынуждающих пользователей делать код обработчика событий встроенным в их 
нтмь-документы. К счастью, эта методика со временем в значительной степени утратила популярность (что нам 
на руку, поскольку она идет вразрез с принципами абстракции данных при создании ненавязчивых БОМ- 
сценариев). 

Когда ІМеізсаре и Іпіегпеі Ехріогег активно конкурировали, в каждом из них модели регистрации событий 
развивались по отдельности, но очень похожими путями. В конечном итоге модель ІМеІзсаре была изменена, чтобы 
стать стандартом ѴѴЗС, а модель Іпіетеі Ехріогег осталась той же самой. 

На сегодняшний день осталось три безотказных способа регистрации событий. Хотя традиционный метод 
является ответвлением старого, встраиваемого способа привязки обработчиков событий, но он надежен и слажен 
в работе. Другие методы относятся к ІЕ и ѴѴЗС способам регистрации событий. В завершение я продемонстрирую 
надежный набор способов, которые могут применяться разработчиками без оглядки на используемый браузер. 

Традиционная привязка 

До сих пор в этой главе я использовал именно традиционный способ привязки событий. Это самый простой 
и наиболее совместимый способ привязки обработчиков событий. Чтобы им воспользоваться, вы прикрепляете 
функцию в качестве свойства йОМ-элемента, за которым нужно наблюдать. В листинге 6.10 показан ряд примеров 
прикрепления событий с использованием традиционного метода. 

Листинг 6.10. Прикрепление событий с использованием традиционного метода их привязки 

// Обнаружение первого элемента <богш> и прикрепление к нему обработчика 
// события ' зиЬтіІ; ' 

боситепб . дебЕІетепбзВуТадЛате ("богт") [0] . опзиЪтіІ; = бипсбіоп (е) { 

// Остановка всех попыток передачи данных формы 
гебигп зборБебаиІб ( е ); 

} ; 


// Прикрепление обработчика события нажатия клавиши к элементу <Ьо<Зу> 

// текущего документа 

босшпепб.Ъобу.опкеургезз = шуКеуРгеззНапсіІег ; 

// Прикрепление к странице обработчика события загрузки 
міпсіои . опіоаб = бипсбіоп () { ...; }; 

Эта технология имеет ряд преимуществ и недостатков, о которых вы должны знать при ее использовании. 

Преимущества традиционной привязки 

Традиционный метод имеет следующие преимущества: 

• Самое большое преимущество использования традиционного метода заключается в его невероятной 
простоте и непротиворечивости, которые в значительной степени гарантируют его однообразную работу 
независимо от используемого браузера. 

• При обработке события ключевое слово Шіз ссылается на текущий элемент, что может оказаться очень 
полезным обстоятельством (как показано в листинге 6.5). 
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Недостатки традиционного способа привязки 

У традиционного метода имеются следующие недостатки: 

• Традиционный метод работает только со всплытием событий, но не с захватом и всплытием. 

• Одновременно к элементу может быть привязан только один обработчик событий. При работе с 
популярным свойством ѵѵіпсіоѵѵ.опіоасі существует потенциальная возможность получения довольно 
странных результатов (отдельные фрагменты кода, используемые для реализации такого же способа 
привязки событий, полностью переписывают предыдущую обработку). Пример проявления этой проблемы 
показан в листинге 6.11, где обработчик событий переписывает старый обработчик. 

• Параметр объект события доступен только в браузерах, не имеющих отношения к Іпіетеі Ехріогег. 

Листинг 6.11. Обработчики события, переписывающие друг друга 

// Привязка исходного обработчика события 
міпсіои . опіоаб = туЕігзбНапсІІег ; 


// Где-нибудь в другой библиотеке, которую вы включили, 

// первый обработчик переписывается, и по окончании загрузки страницы 
// вызывается только второй обработчик — ' туЗесопсІНапсІІег ' 
иіпсіовд . опіоасі = туЗесопсІНапсІІег; 

Зная о возможности безоговорочной подмены обработчика другими обработчиками событий, вы, скорее 
всего, выберете традиционные средства привязки только для простых ситуаций, в которых вы сможете быть 
уверены в коде, работающем вместе с вашим кодом. Тем не менее, обойти эту запутанную ситуацию можно только 
одним способом — воспользоваться предлагаемыми браузерами современными методами привязки событий. 

йОМ-привязка: ѴѴЗС 

Единственный, по-настоящему стандартный способ привязки обработчиков событий к ООМ-элементам 
разработан ѴѴЗС. Памятуя об этом разработчики каждого современного браузера, за исключением Іпіегпеі 
Ехріогег, включают в него поддержку этого способа привязки события. 

Код для привязки новой функции обработки довольно прост. Он существует в виде функции для каждого 
ООМ-элемента (которая носит название абсіЕѵепШзІіепег), принимающей три параметра: название события 
(например, сііск), функцию, которая будет обрабатывать событие, и логический флаг для разрешения или отмены 
захвата события. В листинге 6.12 приводится пример использования функции асісіЕѵепШзІіепег. 

Листинг 6.12. Пример кодового фрагмента, в котором используется способ привязки обработчиков 
событий, принятый ѴѴЗС 

// Обнаружение первого элемента <Гогт> и привязка к нему обработчика события 
// 'зиЬтіб' 

боситепб. дебЕІетепбзВуТадЛате ("Гогт")[0]. 
аббЕѵепбЫзбепег ( ' зиЬтіб ' , Гипсбіоп (е) { 

// Остановка всех попыток отправки данных формы 
гебигп зборБеГаиИ:( е ); 

}, Гаізе) ; 


// Привязка обработчика события нажатия на клавишу к элементу <Ьо<Зу> 
// текущего документа 
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ЪоситепЪ .Ъосіу. асМЕчепЪЫзЪепег ( ' кеургезз ' , туКеуРгеззНапсІІег, Ъаізе) ; 

// Привязка к странице обработчика события ее загрузки 
міпсіои. абсІЕѵепбЫзбепег ( ' Іоасі' , ЪипсЪіоп () { }, Ъаізе); 

Преимущества ѴѴЗС-привязки 

Способ привязки, предложенный ѴѴЗС, имеет следующие преимущества: 

• Этот метод поддерживает обе фазы обработки события: и захват и всплытие. Фаза события переключается 
за счет установки последнего параметра функции асісіЕѵепШзІіепег в Гаізе (для всплытия) или ігие (для 
захвата). 

• Внутри функции обработки события ключевое слово Ііііз ссылается на текущий элемент. 

• Объект события всегда доступен в первом параметре функции обработки. 

• К элементу можно привязать сколько угодно событий, без переписывания ранее привязанных 
обработчиков. 

Недостаток ѴѴЗС-привязки 

У способа привязки, предложенного ѴѴЗС, имеются следующий недостаток: 

• Он не работает в Іпіегпеі Ехріогег; вместо него в этом браузере нужно применять функцию аКасНЕѵепІ. 

Если бы Іпіегпеі Ехріогег использовал способ привязки обработчиков событий, предложенный ѴѴЗС, эта 
глава могла бы быть значительно короче, поскольку не пришлось бы рассматривать альтернативные способы 
привязки событий. Но на данный момент метод привязки событий, предложенный ѴѴЗС, является наиболее 
полноценным и простым в использовании. 

йОМ-привязка: ІЕ 

Способ, используемый для привязки событий в Іпіегпеі Ехріогег во многом кажется похожим на способ, 
предложенный ѴѴЗС. Но если вникнуть в подробности, выясняется, что в некоторых деталях есть весьма 
существенные различия. В листинге 6.13 показано несколько примеров привязки обработчиков событий в Іпіегпеі 
Ехріогег. 

Листинг 6.13. Примеры привязки обработчиков событий к элементам способом, существующем в Іпіегпеі 
Ехріогег 

// Обнаружение первого элемента <богш> и привязка к нему обработчика события 
// 'зиЪтіЪ' 

ЪоситепЪ . деЪЕІетепЪзВуТадЛате ("богш") [0] . аббасЬЕѵепІ: (' опзиЬшіб ', Еипсбіоп () { 

// Остановка всех попыток отправки данных формы 
гебигп зборБебаиИ: (); 

},) ; 

// Привязка обработчика события нажатия на клавишу к элементу <Ьо<Зу> 

// текущего документа 

босшпепб . Ъосіу . аЪЪасПЕѵепЪ ( ' опкеургезз ' , туКеуРгеззНапсІІег ) ; 

// Привязка к странице обработчика события ее загрузки 
иіпсіои . аЪЪасЪЕѵепЪ ( ' опіоасі ' , ЪипсЪіоп () { ...; }); 
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Преимущество ІЕ-привязки 

Преимущество способа привязки событий, существующего в Іпіегпеі Ехріогег, заключается в следующем: 

• К элементу можно привязать сколько угодно событий, без переписывания ранее привязанных 
обработчиков. 

Недостатки ІЕ-привязки 

Недостатки способа привязки событий, существующего в Іпіегпеі: Ехріогег, заключаются в следующем: 

• Іпіегпеі Ехріогег при захвате события поддерживает только фазу всплытия. 

• Внутри функции перехватчика ключевое слово ІІтіз указывает на объект ѵѵіпсіоѵѵ, а не на текущий элемент 
(огромный недостаток ІЕ). 

• Объект события доступен только в параметре ѵѵіпсіоѵѵ.еѵепі. 

• Название события должно иметь префикс «оп» — например, опсііск вместо простого сііск. 

• Он работает только в Іпіегпеі Ехріогег. Для браузеров, не имеющих отношения к ІЕ, нужно использовать 
ѴѴЗС-функцию асісіЕѵепШзііепег. 

Поскольку свойства событий отвечают стандарту не в полной мере, существующая в Іпіегпеі Ехріогег 
реализация привязки событий считается весьма ущербной. Из-за множества недостатков до сих пор приходится 
использовать различные обходные маневры, приводящие эту систему к приемлемому поведению. Но не все еще 
потеряно: стандартная функция добавления событий к ЭОМ все же существует, и она сможет в значительной 
степени скрасить ситуацию. 

асісіЕѵепІ: и гетоѵеЕѵепІ 

В соревновании, затеянном Петером-Паулем Кохом (РеІег-РаиІ КосМ) (в М1:1:р://яиігк5тосіе.огд) в конце 
2005 года, он попросил всех, кто занимается программированием на ІаѵаБсгірі:, разработать новую пару 
функций — асісіЕѵепІ: и гетоѵеЕѵепі:, которые смогли бы предоставить пользователям надежный способ 
добавления и удаления событий в отношении элемента БОМ. Я вышел из этого соревнования победителем, создав 
довольно компактный и достаточно хорошо работающий код. Но позже, один из членов жюри, Дин Эдвардс (Оеап 
Есіѵѵагсіз), выпустил другую версию функции, которые значительно превзошли результаты моего творчества. В его 
реализации использовались традиционные средства привязки обработчиков событий, полностью игнорировавшие 
современные методы. Благодаря этому его реализация могла работать на большом количестве браузеров, 
обеспечивая к тому же все необходимые тонкости, связанные с событиями (нормальную работу ключевого слова 
1Ы5 и стандартный объект события). В листинге 6.14 показан пример кодового фрагмента, в котором используются 
всевозможные аспекты обработки событий, использующие преимущества новой функции асісіЕѵепІ:, где имеет 
место предотвращение исходной реакции браузера на события, включение нормального объекта события, и 
включение нормального ключевого слова ШІ5. 

Листинг 6.14. Пример фрагмента кода, в котором используется функция асісіЕѵепІ: 

// Ожидание завершения загрузки страницы 
асісіЕѵепІ: ( ѵѵіпсіоѵѵ, "Іоасі", бипсбіоп () { 

// Отслеживание любого пользовательского нажатия клавиши 
асМЕѵепІ; ( босшпепб .Ьобу, "кеургезз", іипскіоп (е) { 

// Если пользователь нажал сочетание клавиш Пробел + Сбгі 
іі ( е.кеуСобе == 32 && е.скгІКеу ) { 
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// Отображение нашей специальной формы 

РЫз . деРЕІетепРзВуТадЛате ("Рогт") [0] . зруіе . сіізріау = 'Ыоск'; 

// Гарантирование отсутствия странного поведения 
е . ргеѵепРБеРаиІР () ; 


} 


}) ; 


}) ; 


Функция асісіЕѵепІ; предоставляет невероятно простой и в то же время мощный способ работы с ЭОМ- 
событиями. Если взглянуть на все его преимущества и недостатки, станет совершенно понятно, что эта функция 
может служить в качестве совместимого и надежного средства работы с событиями. Ее полный исходный код, 
работающий со всеми браузерами, не требующий большого объема памяти, обрабатывающий ключевое слово Ып І5 
и определяющий стандарты функций объекта события, приведен в листинге 6.15. 

Листинг 6.15. Библиотека асШЕѵепІ/гетоѵеЕѵепІ;, созданная Дином Эдвардсом 

// абсІЕѵепР/гетоѵеЕѵепР мгіРРеп Ьу Беап Ебмагбз, 2005 
// МІРЪ, іприР Ргот Тіпо 2і;]СІе1 

// ЬРРр: // беап . есімагсіз . паше/'меЫод/2005/10/абб-еѵепр/ 

ГипсРіоп асісіЕѵепР (еіешепр, Руре, Ьапсііег) { 

// присвоение каждому обработчику события уникального ІБ 
іР ( ! Ьапсііег. $$диісі) Ьапбіег. $$диісі = абсіЕѵепР . диісІ++; 

// создание хэш-таблицы видов событий для элемента 
іР (!еіешепр.еѵепРз) еіешепр.еѵепРз = {}; 

// создание хэш-таблицы обработчиков событий для каждой пары 
// элемент-событие 

ѵаг Ьапбіегз = еіешепр.еѵепРз [Руре] ; 

ІР ( ! Ьапсііегз) { 

Ьапбіегз = еіешепр.еѵепРз [Руре] = {}; 

// сохранение существующего обработчика события 
// (если он существует) 
іР (еіешепр ["оп" + Руре]) { 

Ьапсііегз [0] = еіешепр ["оп" + Руре] ; 

} 

} 

// сохранение обработчика события в хэш-таблице 
Ьапсііегз [Ьапсііег . $$диісІ] = Ьапсііег; 

// назначение глобального обработчика события для выполнения 
// всей работы 

еіешепр ["оп" + Руре] = ЬапсІІеЕѵепР; 

}; 
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// счетчик, используемый для создания уникальных ІБ 
асІсІЕѵепБ . диісі = 1; 

БипсБіоп гетоѵеЕѵепБ (еІетепБ, Буре, Ьапсііег) { 

// удаление обработчика события из хэш-таблицы 
ІБ (еІетепБ.еѵепБз && еІетепБ.еѵепБз [Буре] ) { 

беІеБе еІешепБ.еѵепБз [Буре] [Ьапбіег.$$диіб]; 

} 

} ; 


БипсБіоп ЬапсІІеЕѵепБ (еѵепБ) { 
ѵаг геБигпѴаІие = Бгие; 

// захват объекта события (ІЕ использует глобальный объект события) 
еѵепБ = еѵепБ || БіхЕѵепБ(міпбом.еѵепБ); 

// получение ссылки на хэш-таблицу обработчиков событий 
ѵаг Ьапбіегз = БЬіз.еѵепБз[еѵепБ. Буре ]; 

// выполнение каждого обработчика события 
Бог (ѵаг і іп Ьапсііегз) { 

БЬіз . $$Ьапс11еЕѵепБ = Ьапсііегз [і] ; 

ІБ (БЬіз . $$Ьапс11еЕѵепБ (еѵепБ) === Баізе) { 
геБигпѴаІие = Баізе; 

} 

} 

геБигп геБигпѴаІие; 


// Добавление к объекту события ІЕ некоторых "упущенных" методов 
БипсБіоп БіхЕѵепБ(еѵепБ) { 

// добавление стандартных методов событий ИЗО 
еѵепБ . ргеѵепББеБаиІБ = БіхЕѵепБ.ргеѵепББеБаиІБ; 
еѵепБ.зБорРгорадаБіоп = БіхЕѵепБ.зБорРгорадаБіоп; 
геБигп еѵепБ; 

} ; 


БіхЕѵепБ.ргеѵепББеБаиІБ = БипсБіоп() { 

БЬіз.геБигпѴаІие = Баізе; 

} ; 


БіхЕѵепБ.зБорРгорадаБіоп = БипсБіоп() { 

БЬіз . сапсеІВиЬЫе = Бгие; 

} ; 


Преимущества асІсІЕѵеп( 
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Преимущества разработанного Дином Эдвардсом метода привязки событий асісІЕѵепІ: заключаются в 
следующем: 

• Он работает на всех браузерах, даже на старых, уже не поддерживаемых браузерах. 

• Ключевое слово 1:МІ5 доступно во всех функциях привязки, и указывает на текущий элемент. 

• Нейтрализованы все специфические для конкретного браузера функции для пресечения исходных 

действий браузера и для остановки всплытия события. 

• Объект события всегда передается в качестве первого параметра, независимо от типа браузера. 

Недостаток асісІЕѵепІ: 

В разработанном Дином Эдвардсом методе привязки событий асісІЕѵепІ: существует следующий недостаток: 

• Он работает только во время фазы всплытия (поскольку в своей основе он использует традиционный 

метод привязки события). 

Учитывая всю мощь функций асісІЕѵепІ: и гетоѵеЕѵепЬ, не остается абсолютно никаких причин, 
препятствующих их использованию в вашем коде. С высоты того, что демонстрирует разработанный Дином 
исходный код, становится вполне обычной задачей добавление таких свойств, как более четкая стандартизация 
объекта события, запуска обработки события, и тотального удаления обработчиков события, то есть всего того, 
чего очень трудно добиться от обычной структуры обработки событий. 

Виды событий 

Общие события ^ѵаЗсгірІ: могут быть классифицированы на несколько различных категорий. Вероятно 
наиболее востребованной категорией являются события, связанные с мышью, от них не намного отстают события, 
связанные с клавиатурой и формами. В следующем списке представлен широкий обзор различных классов 
существующих событий, которые могут быть обработаны в веб-приложении. А многочисленные примеры работы с 
событиями приведены в приложении Б. 

События, связанные с мышью: Эти события подразделяются на две категории: события, с помощью 
которых отслеживается текущее местоположение указателя мыши (тои5еоѵег, тоизеоиі:), и события, с помощью 
которых отслеживается щелчок мыши (тоизеир, тоизесіоѵѵп, сііск). 

События, связанные с клавиатурой'. С помощью этих событий отслеживается момент нажатия клавиш, и 
контекст в пределах которого он произошел — к примеру, с их помощью отслеживается нажатие клавиш внутри 
элемента іюгт в отличие от нажатия клавиши в пределах всей страницы. Как и в случае с мышью, существует три 
разновидности событий, используемых для отслеживания клавиатуры: кеуир, кеусіоѵѵп и кеургезБ. 

События, связанные с пользовательским интерфейсом : Эти события используются для отслеживания, 
когда пользователи используют ту или иную часть страницы. С их помощью можно, к примеру, четко определить, 
когда пользователь начинает вводить данные в элемент формы. Для отслеживания этих обстоятельств 
используются два события: Госиз и Ыиг (для тех случаев, когда объект теряет фокус). 

События формы : Эти события напрямую связаны только с тем, что случается в форме и в ее элементах 
ввода. С помощью события отправки данных — зиЬтіі: отслеживается момент передачи данных из формы; с 
помощью события изменения — сбапде отслеживается пользовательский ввод данных в элемент; а событие зеіесі: 
возникает, когда был обновлен элемент <5еІесі>. 

События загрузки и ошибки: И последний класс событий относится к странице как таковой, с их помощью 
отслеживается состояние ее загрузки. Они связаны с первоначальной загрузкой страницы пользователем 
(событие Іоасі), и с тем моментом, когда он окончательно покидает страницу (события ипіоасі и ЬеіЪгеипІоасі). 
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Вдобавок к этому с помощью события еггог отслеживается возникновение ошибок ^ѵаЗсгірІ:, позволяя проводить 
индивидуальную обработку ошибок. 

Когда вы разберетесь с основными классами событий, я рекомендую внимательно просмотреть материал 
приложения Б, в котором я провожу анализ всех широко используемых событий, из работы и поведения на 
различных браузерах, и даю описание всех премудростей, необходимых, чтобы добиться от них желаемых 
результатов. 

Создание ненавязчивых йОМ-сценариев 

Все, что изучалось до сих пор было направлено на достижение невероятно важной цели: написанию 
такого кода ^ѵаЗсгірІ:, который смог бы взаимодействовать с вашими пользователями ненавязчивым и 
естественным образом. Движущая сила, положенная в основу этого стиля создания сценариев, заключается в 
появившейся возможности сфокусировать свою энергию на написании качественного кода, способного работать 
на современных браузерах, который перестает действовать, не создавая проблем в работе на устаревших (не 
поддерживающих его) браузерах. 

Чтобы достичь этой цели, можно объединить три методики, изученные в ходе обучения созданию 
приложений на основе ненавязчивых сценариев: 

1. Все выполняемые функции должны быть проверены. К примеру, если требуется обращение к модели НТМІ_ 
ЭОМ, нужно проверить сам факт ее существования и наличия всех функций, необходимых для ее 
использования (например, іГ ( боситепі && сІоситеп(:.де(:ЕІетеп1:ВуІй ) ). Эта методика обсуждалась в 
главе 2. 

2. БОМ должна использоваться для быстрого и однообразного обращения к элементам вашего документа. Как 
только вы узнаете, что браузер поддерживает БОМ-функции, можете свободно создавать простой код, без 
обходных маневров и ненужных ухищрений. 

3. И, наконец, все события нужно привязывать к документу в динамическом режиме, используя БОМ и 
функцию асІсіЕѵепС Теперь уже нельзя где-нибудь воспользоваться какой-нибудь конструкцией, похожей 
на <а ІпгеГ="#" опсІіск="сіо51:иГГ();">...;</а>. Сточки зрения ненавязчивого программирования она никуда 
не годится, поскольку код фактически останется не у дел, если Эа ѵаЗсгірі: отключен, или если 
пользователь работает на старой версии браузера, не поддерживающей эту конструкцию. Поскольку вы 
направляете пользователей на бессмысленный ІІРИ, те из них, кто не имеет поддержки функций сценария, 
будут лишены интерактивности. 

Если это еще не совсем очевидно, вам нужно симулировать полное отсутствие у пользователя установки 
^ѵаЗсгірі, или ущербность его браузера. Попробуйте открыть свой браузер, посетить любимую веб-страницу и 
отключить ]аѵа5сгірІ:, будет ли она после этого по-прежнему работать? А как насчет всех каскадных таблиц 
стиля — С55, и можете ли вы по-прежнему осуществлять все необходимые переходы? И, наконец, можно ли 
пользоваться вашим веб-сайтом без мыши? Все это должно стать частью завершающей задачи для вашего веб¬ 
сайта. Но благодаря тому, что вы приобрели превосходное понимание того, как создается по-настоящему 
эффективный код БаѵаЗсгірб, издержки от этого перехода незначительны, и его можно достичь с минимальными 
усилиями. 

Предупреждение отключения ЛаѵаЗсгірІ 

Сначала нужно выполнить задачу по удалению из ваших НТМІ_-доку ментов всех встроенных обработчиков 
событий. Есть две, часто появляющиеся проблемные области, на которые нужно обратить внимание в вашем 
документе: 
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• Если отключить на странице ІаѵаЗсгірІ: и щелкнуть на любой (на всех) ссылках, смогут ли они перенести 
вас на нужную веб-страницу? Разработчики довольно часто используют ссылки типа бге^"" или ЬгеГ="#", 
предполагающие для получения нужных пользователям результатов разработку некого дополнительного 
ІаѵаЗсгірі-шаманства. 

• Если отключить ІаѵаЗсгірІ:, смогут ли все формы работать и должным образом посылать свои данные? 
Наиболее распространенная проблема возникает при использовании в качестве динамических меню 
элементов <5еІес1> (которые работают только при включенном ІаѵаЗсгірІ:). 

Теперь, последовав этим важным урокам, вы получите веб-страницу, которая будет полезна без 
ограничений для тех людей, у которых отключен ІаѵаЗсгірІ:, и кто продолжает пользоваться ущербными 
браузерами. 

Обеспечение независимости ссылок от .Заѵабсгірі: 

Теперь, когда пользователь может выполнить на странице все действия, нужно обеспечить ему перед 
выполнением любого действия вполне адекватное извещение. Когда компания Ооодіе выпустила Соодіе 
Ассеіегаіюг, который проходит по всем ссылкам на странице и кэширует их для вас, пользователи обнаружили, что 
их электронный адрес, почтовые отправления и сообщения были магическим образом удалены без видимых 
причин. Это было обусловлено тем фактом, что разработчики помещали (к примеру) на свои страницы ссылки для 
удаления сообщений, а затем, для подтверждения удаления выводили окно подтверждения (используя ІаѵаЗсгірІ:). 
Но Соодіе Ассеіегаіюг полностью игнорировал этот замысел со всплывающим окном, и все равно переходил по 
ссылке. 


Этот сценарий специально упомянут, чтобы заострить ваше внимание на бЫр-спецификации, которая 
используется для транспортировки всех документов и файлов по сети Интернет. Наиболее простой СЕТ-запрос 
происходит при щелчке на ссылке; Р05Т-запрос происходит при отправке данных формы. В спецификации 
утверждается, что никакие СЕТ-запросы не должны иметь побочных разрушительных эффектов (таких как 
удаление сообщения), поэтому Соодіе Ассеіегаіюг и работал таким вот образом. Все это в первую очередь 
происходило из-за плохого программирования, но не со стороны Соодіе, а со стороны разработчиков веб¬ 
приложений, создававших ссылки. 

Короче говоря, все ссылки на вашем веб-сайте не должны вызывать разрушения информации. Если по 
щелчку можно удалить, отредактировать или модифицировать любые, принадлежащие пользователю данные, то 
для достижения этой цели вы, скорее всего, должны вместо этого воспользоваться формой. 

Отслеживание блокировки С55 

Одна из крайне неприятных ситуаций связана с браузерами, занимающими промежуточное положение 
между старыми и новыми разработками, слишком устаревшими для поддержки современных ІаѵаЗсгірІ:- 
технологий, но достаточно новыми для поддержки стилевых установок С55. При использовании популярной 
технологии ОНТМІ_ может быть элемент, который вначале может быть скрыт (либо за счет значения сіізріау, 
установленного в попе, либо за счет значения ѵізіЫІИіу, установленного в Иісісіеп), а затем он постепенно 
проявляется (за счет использования ІаѵаЗсгірІ:) при первом посещении страницы пользователем. Но если 
пользователь не имеет включенной поддержки ЭаѵаЗсгірІ;, он этот элемент никогда не увидит. Решение этой 
проблемы показано в листинге 6.16. 

Листинг 6.16. Предоставление технологии проявления изображения после загрузки, безотказно 
работающей при отключенном ІаѵаЗсгірІ: 

<! БОСТУРЕ ЬСгпІ РЛВЫС "-/ /ИЗС/ /БТБ ХНТМЬ 1.0 Тгапзібіопа1//ЕЫ" 

"ЬССр : / / ыыы. ы3 . огд/ТК/ хЬСтІІ /БТБ/ хЬСтІІ-бгапзі'ЬіопаІ . сШс1"> 

<Ы;т1 хт1п5="Ы;1;р : / /ѵгѵгѵг . ыЗ . огд/1999/хЫ;т1"> 
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<ЬеасІ> 

<ше1:а Ы;1;р-еяиіѵ="СопТеп1;-Туре" соп1:еп1:="1:ех1;/Ы:т1; сЬагзе1:=и1:і-8" /> 

<!-- Во время работы сценария к элементу <Ы:т1> присоединяется новый 

класс, дающий нам возможность узнать, доступен или не ТаѵаЗсгірР.--> 

<зсгірб>сіоситеп1:. боситепбЕІешепІ:. сІаззЫаше = ") з" ; </зсгірб> 

<!-- Если ТаѵаЗсгірб доступен, сделать текстовый блок невидимым для 
дальнейшего проявления . 

<збу1е>оз #ТасІеіп { бізріау: попе }</збу1е> 

</Ьеаб> 

<Ьобу> 

<сііѵ ісі="Еасіеіп">Блок всего, что нужно проявить ...;</сііѵ> 

</Ьобу> 

</Ьбгп1> 

Теперь эта технология может работать и без ОНТМІ_-проявления. Возможность узнать, подключен или 
отключен ТаѵаЗсгірТ, и применить стили, дает большой выигрыш предусмотрительным веб-разработчикам. 

Доступность события 

Последнее, что осталось рассмотреть в разработке по-настоящему ненавязчивого веб-приложения — это 
вопрос обеспечения работы событий без использования мыши. Решая эту задачу, мы помогаем двум категориям 
людей: нуждающимся в помощи при доступе к информации (пользователям с ослабленным зрением), и людям, 
которые не любят пользоваться мышью. (Как-нибудь сядьте за компьютер, отключите от него мышь, и посмотрите, 
как перемещаться по ресурсам Интернета, используя только клавиатуру. У вас на многое откроются глаза.) 

Чтобы сделать события ЗаѵаЗсгірІ более доступными, везде, где используются события сііск, тоизеоѵег и 
тоизеоиі, вам нужно серьезно подумать о предоставлении альтернативных, не связанных с мышью привязок. К 
счастью, есть довольно простые способы, с помощью которых можно выправить эту ситуацию: 

Событие щелчка (сііск)-. Разработчики браузеров предприняли один очень мудрый шаг, и привязали 
возникновение событие щелчка к каждому нажатию клавиши ЕпІ:ег. В результате этого необходимость в 
предоставлении каких-то альтернатив в отношении этого события полностью отпала. Тем не менее, нужно иметь в 
виду, что некоторым разработчикам нравится привязывать обработчики щелчка к имеющимся в формах кнопкам 
передачи данных — зиЬтіІ:, чтобы отслеживать, когда пользователь отправляет данные с веб-страницы. Вместо 
использования этого события, разработчик должен привязываться к событию формы 5иЬтИ:, что станет более 
разумной и надежно работающей альтернативой. 

Событие прохождения указателя мыши над элементом (тоизеоѵег)-. При перемещениях по веб-странице с 
использованием клавиатуры вы фактически переключаете фокус с одного элемента на другой. Привязывая 
обработчик событий как к тоизеоѵег, так и к бэсиз, вы сможете гарантировать наличие совместимого решения как 
для тех, кто использует клавиатуру, так и для тех, кто пользуется мышью. 

Событие выхода указателя мыши за пределы элемента (тоизеоиі)-. Если событие Госиз перекликается с 
событием тоизеоѵег, то событие Ыиг возникает, когда фокус выходит за пределы элемента. Поэтому событие Ыиг 
можно использовать в качестве средства, имитирующего событие тоизеоиі с помощью клавиатуры. 

Теперь, узнав, какие пары элементов ведут себя нужным для нас образом, можно еще раз обратиться к 
листингу 6.3, чтобы создать эффект, похожий на проход указателя мыши, который будет работать и без мыши (см. 
листинг 6.17). 
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Листинг 6.17. Привязка к элементам пар событий, позволяющая получить всеобщий доступ к 
использованию веб-страницы 

// Обнаружение всех элементов <а>, для привязки к ним обработчиков событий 
ѵаг 1і = йосшпепк. дебЕІешепбзВуТадЛаше ("а"); 
бог ( ѵаг і = 0; і < а.ІепдбЬ; і++ ) { 

// Привязка обработчика событий тоизеоѵег и босиз к элементу <а>, 

// с помощью которого цвет фона <а> изменяется на синий, когда 
// либо перемещает над ссылкой указатель мыши, либо устанавливает на нее 
// фокус (используя клавиатуру) 

а[і].опшоизеоѵег = а[і].опбосиз = бипсбіоп() { 
бЬіз . збуіе . ЬаскдгоипсіСоІог = 'Ыие'; 

} ; 


// Привязка обработчика событий шоизеоиб и Ыиг к элементу <а>, 

// с помощью которого цвет фона <а> возвращается к исходному белому, 
// когда пользователь покидает ссылку 
а [ і ] . опшоизеоиб = а[і] .опЫиг = бипсбіоп() { 
бПіз . збуіе . ЪаскдгоипсІСоІог = 'мПібе'; 

} ; 

} 


На практике добавление возможности обработки событий клавиатуры в дополнение к обычным событиям 
работы с мышью представляет собой вполне обычную задачу. Ее решение по крайней мере сможет облегчить 
пользователям, зависящим от использования клавиатуры, работу с вашим веб-сайтом, что станет большой 
победой для всех. 

Вывод 

Теперь, когда вы узнали как перемещаться по ООМ, и привязывать к ООМ-элементам обработчики 
событий, а также узнали о всех преимуществах создания ненавязчивого кода ІаѵаЗсгірІ;, можно приступать к 
созданию крупных приложений и интересных эффектов. 

В начале этой главы я представил работу событий в ІаѵаЗсгірІ и сравнил их с моделями событий в других 
языках программирования. Затем вам было показано, какую информацию предоставляет модель события, и как ей 
можно лучше распорядиться. Затем был исследован вопрос привязки событий к ООМ-элементам, и различные 
виды доступных событий. В заключение было показано, как при создании сценариев интегрировать некоторые 
эффективные и ненавязчивые технологии в вашу веб-страницу. 

Далее я собираюсь рассмотреть, как выполняется ряд динамических эффектов и взаимных действий, в 
которых вся изученная нами технология используется наилучшим образом. 
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Глава 7 .ІаѵаЗсгірІ и С55 

Взаимодействие ІаѵаЗсгірі и С55 — главная опора современного ІаѵаБсгірІ-программирования. Фактически 
от всех современных веб-приложений по меньшей мере требуется использование хоть какой-нибудь формы 
динамического взаимодействия. Когда это требование выполняется, пользователь получает возможность быстрее 
перемещаться по информационному наполнению и меньше тратить времени на ожидание загрузки страниц. 
Объединение динамической технологии с теми идеями о событиях, которые были представлены в главе б, 
является основой для создания у пользователей цельного и яркого впечатления. 

Каскадные таблицы стилей стали фактическим стандартом для задания стилей и компоновки удобных и 
привлекательных веб-страниц, и они по-прежнему предоставляют разработчикам самое большое количество 
возможностей, доставляя при этом пользователям наименьшее количество хлопот. Примечательно, что 
объединение этих возможностей с ІаѵаБсгірІ позволяет создавать мощные интерфейсы, включая такие вещи, как 
анимация, элементы управления окнами или динамическое отображение данных. 

Доступ к информации о стилях 

Сочетание ІаѵаБсгірІ и С55 всецело направлено на получение результата за счет взаимодействия. Для 
достижения нужного набора взаимодействующих структур очень важно понимать, что именно вам доступно. 

Исходным инструментом для установки и получения присущих элементу свойств СБ5, является его 
свойство зіуіе. К примеру, если нужно получить высоту элемента, то можно воспользоваться следующим кодом: 
еIе гл . 5І:у Iе.Ие і д Іп С. А если нужно установить определенный размер высоты элемента, можно воспользоваться 
следующим кодом: еІет.БІуІе.ІпеідІ'іІ: = ’ІООрх'. 

При работе со свойствами С55 ООМ-элементов вы столкнетесь с двумя проблемами, связанными с их 
неожиданным поведением. Во-первых, ІаѵаБсгірІ при установке любого свойства, относящегося к размеру, 
требует, чтобы определялась единица измерения (как это было сделано в предыдущем случае). И в то же время, 
любое, связанное с размером свойство вместо числа также возвращает строку, представляющую свойство зіуіе 
элемента (к примеру, ЮОрх вместо 100). 

Во-вторых, если высота элемента составляет 100 пикселов, и вы пытаетесь получить значение его текущей 
высоты, то еще не факт, что будет получено ожидаемое от свойства зіуіе значение ЮОрх. Все дело в том, что 
любая информация о стиле, предустановленная с использованием таблиц стиля или встроенного С55 отражается в 
свойстве зіуіе не вполне достоверно. 

Это вынуждает нас создать для работы с С55 в ІаѵаБсгірІ весьма важную функцию: метод для извлечения 
реально существующих, текущих свойств стиля элемента, который дает точное, вполне ожидаемое значение. Для 
того, чтобы справиться с проблемой вычисляемых значений стиля, существует довольно надежный набор методов, 
которым можно воспользоваться для получения фактических, вычисляемых свойств стиля ЭОМ-элемента. При 
вызове этих методов (которые представлены в ѴѴЗС- и ІЕ-специфических вариантах) вы получаете реально 
существующее вычисляемое значение стиля элемента. В этих методах принимаются во внимание все прошлые 
таблицы стилей и относящиеся к элементу свойства наряду с текущей модификацией ІаѵаБсгірІ:. Использование 
этих методов принесет большую пользу при разработке точного представления тех элементов, с которыми вы 
работаете. 

Также важно принять во внимание многочисленные различия, существующие между браузерами при 
получении вычисляемых значений стиля элемента. Как и во многом остальном, Іпіегпеі Ехріогег имеет одну 
методику получения текущего вычисляемого стилевого значения элемента, а остальные браузеры используют 
другую методику, определенную консорциумом ѴѴЗС. 
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Функция для обнаружения вычисляемых значений стиля элемента показана в листинге 7.1, а пример 
вашей новой функции в действии показан в листинге 7.2. 

Листинг 7.1. Функция для получения реального вычисленного значение принадлежащего элементу С55- 
свойства 51уІе 

// Получение свойства збуіе (паше) определенного элемента (еіеш) 

Іипсбіоп дебЗбуІе ( еіеш, паше ) { 

// Если свойство присутствует в збу1е[], значит, оно было 
// недавно установлено (и является текущим) 
іі (еіеш.збуіе [паше]) 

гебигп еіеш.збуіе [паше] ; 

//В противном случае, попытка воспользоваться методом ІЕ 
еізе іб (еіеш.сиггепбЗбуІе) 

гебигп еіеш.сиггепбЗбуІе [паше] ; 

// Или методом ИЗО, если он существует 

еізе іб (сіосшпепб. бебаиІбѴіем && сіосшпепб.сІебаиІбѴіем.дебСотрибесІЗбуІе) { 

// Вместо бехбАІідп в нем используется традиционное правило 
// написания стиля — 'бехб-аіідп' 
паше = паше .геріасе(/([А-2])/д,"-$1"); 
паше = паше .СоЬоѵгегСазе(); 

// Получение объекта збуіе и получение значения свойства 
// (если оно существует) 

ѵаг з = боситепб .беіаиібѵіем.дебСотрибесіЗбуІе(еіеш,""); 
гебигп з && з.дебРгорегбуѴаІие (пате) ; 

//В противном случае, мы используем какой-то другой браузер 
} еізе 

гебигп пиіі; 

} 


Листинг 7.2. Ситуация, в которой вычисляемое С55-значение элемента не обязательно совпадает со 
значением, которое доступно в объекте зіуіе 


<Ьбш1> 

<ЬеасІ> 

<збу1е>р { ЬеідНб: ЮОрх; }</збу1е> 

<зсгірб> 

міпсіом . опіоаб = 1ипсбіоп(){ 

// Обнаружение абзаца для проверки его высоты 
ѵаг р = боситепб.дебЕІетепбзВуТадИате("р")[0]; 

// Проверка высоты традиционным способом 

аіегб( р.збуіе.ПеідЬб + " значение должно быть равно пиіі" ); 
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// Проверка вычисляемого значение высоты 

аіегб ( дебЗбуІе ( р, "ЬеідЫ;" ) + " должно быть ІООрх" ); 

} ; 

</ зсгірО 
</ЬеасІ> 

<Ьобу> 

<р>Мой рост должен быть 100 пикселов.</р> 

</Ьобу> 

</Ьбш1> 

В листинге 7.2 показано, как можно получить фактическое вычисленное значение С55-свойства ООМ- 
элемента. В данном случае вы получаете фактическую высоту элемента в пикселах, даже если эта высота 
установлена через С55 в заголовке файла. Важно отметить, что ваша функция игнорирует альтернативные 
единицы измерения (к примеру, те, в которых используется процентное отношение). И хотя это решение не 
является всецело приемлемым, оно заложило неплохие стартовые позиции. 

Теперь, располагая этим инструментом, вы можете посмотреть, как получать и устанавливать нужные вам 
свойства для создания некоторых основных моментов взаимодействия ОНТМІ_. 

Динамические элементы 

Под динамическим понимается элемент, управляемый с использованием ІаѵаВсгірІ и С55 для создания 
нестатических эффектов (простым примером может послужить флажок, указывающий на ваш интерес к 
информационным бюллетеням, и всплывающая область ввода сообщений электронной почты). 

В создании динамических эффектов в основном используются три главных свойства: позиции, размера и 
видимости. Пользуясь тремя этими свойствами вы можете воспроизводить на современных браузерах наиболее 
часто встречающиеся моменты взаимодействия с пользователем. 

Позиция элемента 

Работа с позицией элемента является важной строительной составляющей для разработки на веб-странице 
интерактивных элементов. Обращение к 055-свойствам позиции и изменение их значений дает возможность 
эффективно воспроизводить ряд распространенных анимационных эффектов и интерактивных действий (к 
примеру, осуществлять перетаскивание). 

Важным шагом в работе с позиционированием элементов является знание такого, часто востребуемого 
вопроса, как работа системы позиционирования в С55. В С55 элементы позиционируются с использованием 
смещений. Используемое при этом измерение представляет собой значение смещения от левого верхнего угла 
родительского элемента. Пример системы координат, используемой в С55, показан на рис. 7.1. 
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Рис. 7.1. Пример системы координат на веб-странице при использовании С5Б 

Элемента на странице имеют то или иное смещение сверху (вертикальная координата) и слева 
(горизонтальная координата). Вообще-то большинство элементов в зависимости от тех элементов, которые их 
окружают, имеют простое статическое позиционирование. Согласно предложениям стандарта С55, элемент 
должен иметь ряд различных схем позиционирования. Чтобы в этом лучше разобраться, посмотрим на обычную 
НТМІ_ веб-страницу, показанную в листинге 7.3. 

Листинг 7.3. НТМІ. веб-страница, которой можно воспользоваться для демонстрации различий в 
позиционировании 


<ЬСт1> 

<Ьеа<3> 

<зСу1е> 

Р{ 

Ъогсіег: Зрх зоіісі ге<3; 
расісііпд: ІОрх; 
місНгЬ: 400рх; 

Ьаскдгоипсі: #РРР; 

} 

р.осісі { 

/* Сюда помещается информация о позиционировании */ 
розіСіоп: зСаСіс; 

Сор: Орх; 

ІеРС: Орх; 

} 

</зРу1е> 

</ЬеасІ> 

<Ьо<Зу> 



134 


<р>Ьогеш ірзигп сіоіог зіб атеб, сопзесбебиег асіірізсіпд еііб. Ебіат ...;р> 

<р с1азз=' осМ '>РЬазе11из сИсбит сіідпіззіт ;]избо. Биіз пес гізиз ісі 

пипс...; р> 

<р>5есІ ѵеі Іео. Ыиііа іасиііз, богбог поп Іаогееб сіісбит, бигріз сііаш 

...; </р> 

</ЪосІу> 

</Ъбт1> 

Посмотрим, как с установками, имеющимися в нашей простой НТМІ_-странице, изменяется 
позиционирование второго параграфа при различных схемах компоновки веб-сайта: 

Статическое позиционирование: Это исходный способ позиционирования элемента; он просто следует 
нормальному ходу формирования документа. Свойства сверху — Сор и слева — ІеГі при статическом 
позиционировании элемента не имеют никакого эффекта. На рис. 7.2 показан абзац, который имеет следующее 
С55-позиционирование: розШоп: зСаСіс; Сор: Орх; ІеГС: Орх;. 


Ьогст ірхит сіоіог хіі атеі. сопхесіеіиег асіірізсіпд еііі. Еііат 
ті^хіо, аііциат ісі. іетрих іп. дгаѵісіа иі. сгох. СигаЬішг іп 
харіеп. Іпіе^ег хосіаіех. СигаЬігиг хссі юпог. 5ссі пе^ие. N0118 
пипс ірхит, соттосіо еі, иіігісех аі. Гсидіаі е^еі, сіиі. 

СигаЬішг пес сгох хіі атеі циат хосіаіех хосіаіех. Ѵіѵатих поп 
схі. С^иі.хсіие ѵиіриіаіе ѵепепаііх ехі. Ѵіѵатих аі ита. ІІі 
сіоіог. СигаЬігиг ѵехііЬиІит таіехиасіа теіих. Оиіх рохисгс. ті 
хіі атеі сіісіит ѵсНісиІа. рссіе хеш асііріхсіпд ресіс. ѵеі іасиііз 
Іогет піЬЬ ѵііае Зихю. Іпіе^ег піхі таигіх. иіігісісх ѵііае. Іасіпіа 
иі. ѵагіих иі. піЬЬ. 


РЬахеІІих сіісіит сіідпіххіт ]ихю. Оиіх пес гіхих ісі пипс 
иіігіссх еісііепсі. МогЬі рохисгс ІоЬопіх тахха. МогЬі сі игпа 
псс рссіе сісііепсі сіаріЬих. СигаЬішг хіі атеі піЬЬ іп юпог 
гиігит ІоЬопіх. Аій^иат Егіпдіііа ісііих псс Іогст. Маигіх 
сісііепсі осііо іп піЬЬ. МогЬі тадпа сіиі. іаисіЬих Іисіих, аисіог 
ас. ітрсгсіісі псс. хеш. Ргасхст иііатсогрсг агси иі Іасих. 
РЬахеІІих іеидіаі ѵеііі хіі атеі ті. (Зиіхцие хсеіегіхсіис. Оиіх 
Іасіпіа ісііих хетрег ригих. МогЬі сі Ісо. Аій^иат рохисгс 
ітрсгсіісі піЬЬ. РеИемехе^ис яиіх псцис. Іп хссі ѵеііі яиіх огсі 
тітт гЬопсих. 


5ссі ѵеі Ісо. Ыи На іасиііх. юпог поп Іаогееі сіісшт, іигріх еііат 
Іасіпіа тахха. огпагс Іисіих Ісо сгох хіі атеі хет. Іпіе^сг 
ЬіЬспсІит сіаріЬих ритх. Эопсс та^па ісііих. тоіехііе иі, 
сіаріЬих хссі. Ссидіаі псс, схі. Ыат іаисіЬих іогет поп апіе. 
Іпіс^сг иі ірхит. Оиіх іасіііхіх ті поп сгох. Ыиііа хоііісііисііп 
огсі аі іигріх Іисіих рЬагсіга. Ргоіп ІоЬопіх ригих псс юпог. 
(}иіхсіие поп теіих. Nипс спіт схі. ріассгаі псс. ігіхііяие хссі. 
аііциат іп. Іссіих. Аій^иат ѵіѵегга. Сит хосііх паіск^ис 
рспаііЬих сі тадпіх сііх рапигіепі топіех, пахссшг гійісиіих 
тих. Ргоіп ѵеЬісиІа ѵспспаііх осііо. Эопсс ѵіѵегга соттосіо 
Іссшх. 5ихрспс1іххс роіепіі. 
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Рис. 7.2. Абзац при обычном (статическом) формировании страницы 

Относительное позиционирование: Этот способ позиционирования очень похож на статическое 
позиционирование, поскольку элемент будет так же следовать обычному ходу формирования документа, пока ему 
не будет указано что-либо иное. Но установка свойств (юр или Іе(4 приведет к смещению элемента по отношению 
оригинальной (статической) позиции. Пример относительного позиционирования с использованием СБ5 ровШоп: 
геіаііѵе; (юр: -50рх; ІеЛ: 50рх; показан на рис. 7.3. 


Ьогет іряит сіоіог яіі атеі. сопяссіеіисг аі!іріясіп§ сііі. Еііат 
ті іияіо, аікріат ісі, іетрия іп. §гаѵі<іа иі. с гоя. СигаЬігиг іп 
яаріеп. Іпіе^сг яіхіаіея. СигаЬігиг яеіі юпог. 5с<1 псяис. ІЧиІІа 
пипс іряит, сотпкхіо сі. иіігісея аі. іеи^іаі с§еі. сіиі. 

СигаЬігиг псс стоя яіі атеі ^иат ясхіаіея яіхіаіея. Ѵіѵатия поп 
сяі. (Зиіяяис ѵиіриіаіе ѵепепаіія еяі. Ѵіѵатия аі ита. ІЛ 
сіоіог. СигаЬігиг ѵсяііЬиІит таісяиаііа тсіия. Ьиія рояиеге. ті 
яіі атеі ііісіит ѵеЬісиІа. реііс яет асііріясіп^ реііс. ѵсі іасиіія 
Іогст піЬЬ ѵігяе іпяю Іптесег піяі таіігія піігігіся ѵііяс Іасіпіа 


Ш. ѵаі 


РЬаяеІІия ііісіит сіі^піяяіт іияіо. Ьиія псс гіяия ісі пипс 
иіігісся еіеііепіі. МогЬі рояисгс ІоЬогіія таяяа. МогЬі сі ита 
псс рсііе еісііспсі сІаріЬия. СигаЬігиг яіі атеі піЬЬ іп юпог 
гиігит ІоЬопія. Аііциат Ігіп^іііа ісііия псс Іогст. Маигія 
еіеііепсі осііо іп піЬЬ. МогЬі та^па сіиі. ІаисіЬия Іисіия. аисіог 
ас. ітрсгсіісі псс. яет. Ргасяспі иііатсогрсг агси иі Іасия. 
РЬаяеІІия іеи§іаі ѵсііі яіі атеі ті. С)иіяі]ис ясе1егіяі]ие. Оиія 
Іасіпіа ісііия ястрсг ригия. МогЬі сі Іео. Аііциат рояисгс 
ітрсгііісі піЬЬ. Ре11спіеяі]ие диія псцис. Іп яссі ѵсііі ^иія огсі 
гиігит гЬопсия. 


5сіі ѵсі Ісо. Ыиііа іасиіія. юпог поп Іаогссі ііісіит. іигрія іііат 
Іасіпіа таяяа. отагс Іисіия Ісо сгоя яіі атеі яет. Іпіс^сг 
ЬіЬепсІит ііаріЬия ригия. Эопсс та§па ісііия, тоісяііс иі, 
сІаріЬия яеіі, Іеи^іаі псс, сяі. Ыат ІаисіЬия Іогст поп апіе. 
Іпіс^сг иі іряит. Ьиія Іасіііяія ті поп сгоя. Ыиііа яоііісііиіііп 
огсі аі іигрія Іисіия рЬагсіга. Ргоіп ІоЬопія ритя псс юпог. 
(2иіяі]ие поп тсіия. ЬІипс спіт сяі. ріассгаг псс. ігіяік]ие яссі, 
а1к]иат іп. Іссіия. Аііциат ѵіѵегга. Сит яосіія паих^ие 
рспаііЬия сі та^пія ііія рапигіепі топіея. паяссіиг гісіісиіия 
тия. Ргоіп ѵеЬісиІа ѵепепаіія осііо. О о псс ѵіѵегга сотпкхіо 
Іссіия. Зиярспіііяяс роіепіі. 


Рис. 7.3. Относительное позиционирование, при котором элемент смещен вверх и перекрывает 
предыдущий элемент, а не следует обычному ходу формирования документа 

Абсолютное позиционирование: Абсолютное позиционирование элемента полностью выключает его из 
нормального хода формирования документа. При абсолютном позиционировании элемент будет отображен 
относительно первого родительского элемента, который не имеет статической позиции. Если родительские 
элементы отсутствуют , он позиционируется относительно всего документа. Пример абсолютного 
позиционирования с использованием С55 розіСіоп : аЬзоІиІе; (юр: 20рх; ІеГі: Орх; показан на рис. 7.4. 
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РЬачсІІич (іісгит (ііітіччітіичіо. Эиіч псс гічич ісі пипс 
иіігіссч сісііспсі. МогЬі рочисгс ІоЬопіч тачча. МогЬі еі ита 
псс роіс сісііспсі ііаріЬич. СигаЬігиг чіі атеі піЬЬ іп юпог 
гиігит ІоЬопіч. Аііциат Ігіп^іНа іеііич псс Іогет. Маигіч 
сІсіГспсі скііо іп піЫІ. МогЬі та^па ііиі, ІаисіЬич Іисіич, аисіог 
ас. ітрегіііеі псс. чет. Ргаечспі иііатсогрсг агси иі Іасич. 
РЬачсІІич Геи^іаі ѵсііі чіі атеі ті. (}и^ис чсе1егічі]ие. Оиіч 
Іасіпіа ісііич чстрсг ригич. МогЬі сі Іео. Аіщиат рочисгс 
ітрсгсіісі піЬЬ. РсНспісчяис диіч псцис. Іп чегі ѵсііі циіч огсі 
гиігит гЬопсич. 


5с(1 ѵсі Ісо. Ыиііа іасиііч. юпог поп Іаогссі (Іісіит. іигріч сііат 
Іасіпіа тачча. отагс Іисіич Іео сгоч чіі атеі чет. Іпіе^сг 
ЬіЬспсІит (ЗаріЬич ригич. Эопсс та^па ісііич. тоісчііс иі, 
ііаріЬич чс(і. Гси^іаі псс. счі. Ыат ІаисіЬич Іогет поп апіе. 
Іпіс^сг иі ірчит. Эиіч Іасііічіч ті поп сгоч. ЬІиІІа чоііісііиіііп 
огсі аі іигріч Іисіич рНагсіга. Ргоіп ІоЬопіч ригич псс юпог. 
(^иічяис поп тсіич. ЬІипс спіт счі. ріасегаі псс. ігічііцис че<1, 
аііциат іп, Іссіич. Аііфіат ѵіѵспа. Сит чосііч паюцис 
рспаііЬич сі та^піч іііч рапигіепі топіеч, пачссіиг гісіісиіич 
тич. Ргоіп ѵсЬісиІа ѵспспаііч о<ііо. Оопсс ѵіѵспа соттосіо 
Іссіич. Зичрешіічче роіепіі. 


Рис. 7.4. Абсолютное позиционирование, при котором элемент позиционированный относительно левого 
верхнего угла страницы, находится поверх того элемента, который уже был отображен на этом месте 

Фиксированное позиционирование : Фиксированное позиционирование работает за счет позиционирования 
элемента относительно окна браузера. Установка значения свойств элемента Іор и ІеГі в 0 пикселов приведет к 
отображению этого элемента в верхнем левом углу браузера на все время пребывания пользователя на этой 
странице, при этом все случаи использования прокрутки окна браузера этим элементом будут полностью 
проигнорированы. Пример фиксированного позиционирования с использованием С55 розіііоп: ЯхесІ; Сор: 20рх; 
пдЫ: Орх; показан на рис. 7.5. 

Знание того, как может быть позиционирован элемент, играет важную роль в понимании, где элемент 
должен быть размещен в ЭОМ-структуре, или какое средство позиционирования нужно использовать для 
достижения наилучшего эффекта. 

Теперь мы посмотрим, как извлечь и использовать точную позицию элемента, независимо от того, какая 
компоновка применяется, или какие С55-свойства установлены. 
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1 ли ш аи. пииа шіиш, имип шмі іаімііі ии іиш. іиіріл шиш і 

ЬіЬспсІит (ІаріЬич риги*. Цопес пиши іеііи 
(ІаріЬич чесі. Геищаі пес. ечі. №т ГаисіЬич к 
Іподсг и( ірчит Оиіч Іасііічіч ті поп его*. ? 
огсі аі іигріч Іисіич рЬагсіга Ртт ІоЬопіч рі 
(^иічцие поп те іи* Кипе епіт ечі. ріассгаі і 
аііциат іп. Іссіич. Лііциат ѵіѵегга. Сит чос 
рспайЬич с( таипіч (Ііч раПигіспі томен, па 
тич. Ргоіп ѵсЬісиІа ѵепспаііч оіііо. Цопес ѵ 
Ісстч. 5ичрепФчче роіепіі. 

РІіачеІІич ііісіит іііипіччіт іичю. Оиіч пес гічич кі пипс 
иіігіееч сІеіГсіиІ. МоіЬІ рочиеге ІоЬопіч тачча. МшЪі еі игпа 
пес рейс еіеііеші (ІаріЬич. СигаЬііиг чіі атеі піЬЬ іп юпог 
пііпіт ІоЬопіч. Лііциат Іпп^іІІа іеііич пес Іогет. Маигіч 
еіеііеші осію іп шЫІ. МогЬі лиспа сіиі. ІаисіЬич Іиспіч. аисіог 
ас. ітпегсіісі пес. чет. Ргаечспі иііатсогрсг агси иг Іасич. 

РЬачсІІич Гсиріаі ѵсііі чіі атеі ті. Оиічцис чсеіегічцис. Ошч 

Іасіпіа іеііич четрег ригич. МогЬі еі Ісо. Лііциат рочиеге 
ітрепіісі піЫі. Рсііепіечцие циіч пецие. Іп чесі ѵсііі циіч огсі 
пііпіт гЬопсич. 


5есІ ѵеі Ісо. ІЧиІІа іасиііч, юпог поп Іаогсеі (Ііспіт. (игріч Фат 
Іасіпіа тачча. отагс Іисіич Ісо сгоч чіі атс( чет. Іпіерсг 
ЬіЬеінІипі (ІаріЬич ригич. Оопес подпа (еііич. тоіечііс иі. 
(ІаріЬич чесі. Геищаі пес. ечі. Nат ГаисіЬич Іогет поп апіе. 
Іпіе^ег иі ірчипѵ Оиіч Іасііічіч ті поп егоч. Ьіиііа чоііісішсіт 
огсі аі (игріч Іисіич рЬагсіга Ргоіп ІоЬопіч ригич пес юпог. 
Оиічцис поп теіин. Кипе епіт ечі. ріасепи пес. тчііцие чесі, 
аІіс|иат іп, Іссіич. Лііциат ѵіѵегга. Сит чосііч паіоцис 
рспайЬич с( іпаітіч (Ііч раПигіспі топіеч. пачссіиг гійісиіич 
тич. Ргоіп ѵсЬісиІа ѵепспаііч снііо. Оопес ѵіѵегга соттосіо 
Іесіич. ЗичрепШчче роіепіі. 
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Рис. 7.5. Фиксированное позиционирование, при котором элемент позиционируется в левом верхнем углу 
страницы, даже если окно браузера прокручено вниз 

Получение позиции 

Размещение элемента варьируется в зависимости от его С55-параметров и того контента, который 
непосредственно к нему примыкает. Один только доступ к 055-свойствам или к их вычисленным значениям еще 
не предоставляет возможность узнать точную позицию на странице, или даже внутри другого элемента. 

Для начала рассмотрим нахождение позиции элемента на странице. Для получения этой информации в 
вашем распоряжении имеется несколько свойств элемента. Следующие три свойства поддерживаются всеми 
современными браузерами, а вот как они их обрабатываю, это уже другой вопрос: 


о^зеіРагепі: Теоретически это свойство указывает на родительский элемент, внутри которого 
осуществляется позиционирование. Но на практике элемент, на который ссылается оДзеІіРагепІ: зависит от 
браузера (к примеру, в РігеГох он ссылается на корневой узел, а в Орега — на непосредственно родительский 
элемент). 


оГГзеИеП и о^зеіТор: Эти параметры являются горизонтальным и вертикальным смещением элемента в 
пределах контекста оДзеІРагепІ:. Хорошо, что во всех современных браузерах их назначение точно соблюдается. 

Теперь самым хитрым делом будет найти способ определения подходящей кроссбраузерной системы 
изменений размещения элементов. Наиболее унифицированным способом решения этой задачи будет 
использование методов, представленных в листинге 7.4, с помощью которых осуществляется перемещение вверх 
по дереву ЭОМ с использованием свойства оДзеЬРагеп!:, и сложения встречающихся на этом пути значений 
смещения. 


Листинг 7.4. Две вспомогательные функции для определения местоположения элемента (х и у) 
относительно всего документа 

// Определение X (горизонтальной слева) позиции элемента 
бипсбіоп радеХ(еІеш) { 

// Проверка на достижение корневого элемента 
гебигп еіет. оббзебРагепі; ? 
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// Если не дошли до самого верха, добавление текущего смещения и 
// продолжение движения вверх 

еіегп. оИзебЪебб + радеХ( еіеш. оИзебРагепб ) : 

// В противном случае, получение текущего смещения 
еіеш.оІІзебЬеІб; 

} 

// Определение У (вертикальной сверху) позиции элемента 
бипсбіоп радеУ (еіеш) { 

// Проверка на достижение корневого элемента 
гебигп еіеш. оИзебРагепб ? 

// Если не дошли до самого верха, добавление текущего смещения и 
// продолжение движения вверх 

еіеш.оІІзебТор + радеУ( еіеш.оІІзебРагепб ) : 

// В противном случае, получение текущего смещения 
еіеш.оІІзебТор; 

} 


Следующая часть головоломки с позиционированием заключается в определении горизонтальной и 
вертикальной позиции элемента в пределах его родителя. Важно отметить, что для этого вовсе недостаточно 
использовать свойства элемента зіуІе.ІеП или зіуіе.іюр, поскольку вам может потребоваться определить позицию 
элемента, стиль которого не задавался при помощи ІаѵаЗсгірІ; или С55. 

Используя позицию элемента относительно его родителя вы сможете добавлять в ООМ дополнительные 
элементы, относительно их родительских элементов. Это, к примеру, особенно пригодится для создания 
контекстных подсказок. 

Чтобы найти позицию элемента относительно его родительского элемента, нужно опять вернуться к 
свойству оІТзеІРагепІ. Поскольку это свойство не гарантирует возвращения фактического родителя для заданного 
элемента, для обнаружения разницы между родительским и дочерним элементами необходимо воспользоваться 
функциями радеХ и радеУ. В двух функциях, показанных в листинге 7.5, я пытаюсь сначала воспользоваться 
свойством оГГзеІРагепІ;, если оно действительно указывает на фактического родителя текущего элемента; в 
противном случае я продолжаю перемещаться вверх по ЭОМ, используя методы радеХ и радеУ для определения 
его реальной позиции. 

Листинг 7.5. Две функции для определения позиции элемента относительно его родительского элемента 

// Определение горизонтальной позиции элемента внутри его родителя 
Іипсбіоп рагепбХ (еіеш) { 

// Если оІІзебРагепб указывает на родителя элемента, то раннее 
// завершение работы 

гебигп еІет.рагепбЛосІе == еіеш. оИзебРагепб ? 
еіеш.оІІзебЬеІб : 


// В противном случае нужно найти позицию относительно всей страницы 
// для обоих элементов и вычислить разницу 
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радеХ ( еіеш ) -радеХ ( еІет.рагепРЫосІе ); 

} 

// Определение вертикальной позиции элемента внутри его родителя 
Іипсбіоп рагепбУ (еіеш) { 

// Если оІІзебРагепб указывает на родителя элемента, то раннее 
// завершение работы 

геРигп еІет.рагепРЫосІе == еіеш.оІІзебРагепб ? 
еіеш.оІІзеРТор : 

// В противном случае нужно найти позицию относительно всей страницы 
// для обоих элементов и вычислить разницу 
радеУ ( еіеш ) -радеУ( еІет.рагепРЫосІе ); 

} 


Заключительная часть работы с позиционированием элементов заключается в определении позиции 
элемента относительно его С55-контейнера. Как ранее уже было рассмотрено, элемент фактически может быть 
содержимым одного элемента, а позиционирован относительного другого родительского элемента (с 
использованием относительного и абсолютного позиционирования). Имея это в виду, вы можете вернуться 
обратно к функции деІЗіуІе и определить вычисленное значение С55-смещения, поскольку именно ему позиция и 
равна. 


Чтобы справиться с этой задачей есть две простые интерфейсные функции, показанные в листинге 7.6, 
которыми можно воспользоваться. Обе они просто вызывают функцию деІЗіуІе, но также еще и удаляют любую 
«внешнюю» (пока вы не станете использовать там, где это нужно, не пиксельный формат) информацию о 
единицах измерения (к примеру, ІООрх превратится в 100). 

Листинг 7.6. Вспомогательные функции для определения С55-позиционирования элемента 

// Определения левой позиции элемента 
Іипсбіоп розХ(еІеш) { 

// Получение вычисляемого значения збуіе и извлечение числа из значения 
гебигп рагзеіпб ( дебЗбуІе ( еіеш, "Іеіб" ) ); 

} 

// Определение верхней позиции элемента 
Іипсбіоп розУ(еіеш) { 

// Получение вычисляемого значения збуіе и извлечение числа из значения 
гебигп рагзеіпб( дебЗбуІе( еіеш, "бор" ) ); 

} 

Установка позиции 

В отличие от получения позиции элемента, ее установка носит значительно менее гибкий характер. Но 
когда она используется в сочетании с различными способами задания формата (абсолютным, относительным, 
фиксированным), вы можете получить вполне сопоставимые и приемлемые результаты. 

В настоящее время существует только один способ корректировки позиции элемента — изменение его 
С55-СВОЙСТВ. Чтобы сохранить постоянство методологии, вам нужно подвергать изменениям лишь свойства ІеН и 
Іор, хотя существуют и другие свойства (снизу — ЬоИот и справа — пдИ1). Для начала вы можете просто создать 
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пару функций, показанных в листинге 7.7, которые можно будет использовать для установки позиции элемента 
независимо от его текущего положения. 

Листинг 7.7. Две функции для установки х и у позиций элемента, независимо от его текущей позиции 

// Функция для установки горизонтальной позиции элемента 
іипсбіоп зебХ(е1ет, роз) { 

// Установка СЗЗ-свойства ' ІебС' с использованием единицы измерения, 

// выраженной в пикселах 
еіеш.збуіе . Іеіб = роз + "рх"; 

} 

// Функция для установки вертикальной позиции элемента 
іипсбіоп зеСУ (еіеш, роз) { 

// Установка СЗЗ-свойства 'Сор' с использованием единицы измерения, 

// выраженной в пикселах 
еіеш.збуіе .Сор = роз + "рх"; 

} 


Тем не менее, становится вполне очевидной необходимость разработки второго набора функций, 
показанного в листинге 7.8, который можно будет использовать для установки позиции элемента относительно его 
последней позиции — к примеру, установить элемент на 5 пикселов левее его текущей позиции. Использование 
этих методов тесно связано с различными анимационными эффектами, являющимися основой ОНТМІ_-разработки. 

Листинг 7.8. Две функции для установки позиции элемента относительно его текущей позиции 

// Функция добавления пикселов к горизонтальной позиции элемента. 

СипсСіоп асЫХ (еіеш, роз) { 

// Получение текущей горизонтальной позиции и добавление к ней 
// смещения. 

зеСХ( розХ(еІеш) + роз ); 

} 

// Функция добавления пикселов к вертикальной позиции элемента. 

СипсСіоп асЫУ (еіеш, роз) { 

// Получение текущей вертикальной позиции и добавление к ней 
// смещения. 

зеСУ( розУ (еіеш) + роз ); 

} 


Вот теперь я полностью прошелся по всей палитре работы, связанной с позиционированием 

элемента. Представление о том, как работает позиционирование элемента, как получать и устанавливать его 
точную позицию, является основным аспектом работы с динамическими элементами. Следующей стороной этой 
работы, которую я собираюсь рассмотреть, является точный размер элемента. 

Размер элемента 

Определение высоты и ширины элемента может быть как невероятно простой, так и мучительно тяжелой 
задачей, в зависимости от ситуации и той цели, для которой она выполняется. В большинстве случаев для 
получения текущей высоты и ширины элемента нужно будет всего лишь воспользоваться модифицированной 
версией функции деіЗіуІе (см. листинг 7.9). 
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Листинг 7.9. Две функции для извлечения текущей высоты или ширины ООМ-элемента 

// Получение текущей высоты элемента (с использованием вычисляемого С35) 
іипсбіоп дебНеідііі; ( еіеш ) { 

// Получение вычисляемого значения СЗЗ и извлечение необходимого 
// числового значения 

гебигп рагзеіпб ( дебЗбуІе ( еіеш, ’ЪеідЫ;' ) ); 

} 

// Получение текущей ширины элемента (с использованием вычисляемого СЗЗ) 
іипсбіоп деСМісНсЪ. ( еіеш ) { 

// Получение вычисляемого значения СЗЗ и извлечение необходимого 
// числового значения 

гебигп рагзеіпб ( дебЗбуІе ( еіеш, 'мійСП' ) ); 

} 


Сложности возникают при попытке сделать две вещи: первое, когда вам нужно получить полную высоту 
элемента, у которого есть предопределенная высота (к примеру, вы начинаете анимацию с 0 пикселов, но вам 
нужно узнать насколько высоким или широким может быть элемент), и второе, это значение получить 
невозможно, когда элемент невидим, то есть его свойство сіізріау имеет значение попе. Обе эти проблемы 
возникают при попытке выполнения анимационного эффекта. Вы начинаете анимацию объекта (который к этому 
моменту вполне возможно имеет значение сіізріау установленное в попе) с 0 пикселов, и вам нужно развернуть 
его в высоту до полного размера. 

В листинге 7.10 представлены две функции, показывающие, как можно определить потенциальную высоту 
и ширину элемента независимо от его текущих значений высоты и ширины. Эта задача выполняется за счет 
обращения к свойствам сІіепШісШі и сІіепІНеідМІ:, предоставляющим полную возможную область прокрутки 
элемента. 

Листинг 7.10. Две функции для получения полной потенциальной высоты или ширины элемента, даже 
если он скрыт 

// Получение полной возможной высоты элемента (в отличие от фактической 
// текущей высоты) 

іипсбіоп іиІІНеідііб ( еіеш ) { 

// Если элемент отображен на экране, то сработает свойство 
// оіізебНеідііі; а если оно не сработает, то сработает дебНеідііі: () 
іі ( дебЗбуІе ( еіеш, 'сіізріау' ) != 'попе' ) 

гебигп еіеш. оИзебНеідЫ; | | дебНеідЫ; ( еіеш ); 

// В противном случае нам придется иметь дело с элементом, 

// у которого сіізріау имеет значение попе, поэтому 
// нужно переустановить его СЗЗ-свойства, чтобы считать более 
// точный результат 
ѵаг оісі = гезебСЗЗ ( еіеш, { 
сіізріау : ' ' , 

ѵізіЬіІібу : 'ЫсМеп', 
розібіоп: 'аЬзоІибе' 

}); 
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// Определяем полную высоту элемента, используя сІіепбНеідііі;, 

// а если это свойство не работает, используем дебНеідііб 
ѵаг Ъ. = еіеш.сІіепбНеідііі; | | дебНеідііб ( еіеш ); 

//В завершение восстанавливаем прежние СЗЗ-свойства 
гезбогеСЗЗ ( еіеш, оісі ) ; 

// и возвращаем полную высоту элемента 
гебигп Н; 

} 

// Получение полной возможной ширины элемента (в отличие от фактической 
// текущей ширины) 

Іипсбіоп ЕиШлЛсПсН ( еіеш ) { 

// Если элемент отображен на экране, то сработает свойство 
// оИзеСМісНсЪ. а если оно не сработает, то сработает деСМісНсН () 
іі ( дебЗбуІе ( еіеш, 'бізріау' ) != 'попе' ) 

гебигп еіеш. оІІзебИісібЬ. | | дебИФббП ( еіеш ); 

//В противном случае нам придется иметь дело с элементом, 

// у которого бізріау имеет значение попе, поэтому 
// нужно переустановить его СЗЗ-свойства, чтобы считать более 
// точный результат 
ѵаг оісі = гезебСЗЗ ( еіеш, { 
бізріау : '', 

ѵізіЬіІібу: 'Нісісіеп', 
розібіоп: 'аЬзоІибе' 

}) ; 


// Определяем полную ширину элемента, используя с1іепі;МісН;Н, 

// а если это свойство не работает, используем дебКісНсН 
ѵаг и = еіеш. сНепЕМісНсЪ. I I деЕМФсНсН ( еіеш ); 

// В завершение восстанавливаем прежние СЗЗ-свойства 
гезбогеСЗЗ ( еіеш, оісі ) ; 

// и возвращаем полную ширину элемента 
гебигп и; 

} 

// Функция, используемая для переустановки набора СЗЗ-свойств, которые 
// позже можно будет восстановить 
Іипсбіоп гезебСЗЗ( еіеш, ргор ) { 

ѵаг оісі = { } ; 


// Перебор всех свойств 
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бог ( ѵаг і іп ргор ) { 

// Запоминание старых значений свойств 
о1сІ[ і ] = еіеш. збуіе [ і ]; 

// и установка новых значений 
еіеш.збуіе[ і ] = ргор[і]; 

} 

// возвращение набора значений для использования в функции гезбогеСЗЗ 
гебигп оіб; 

} 

// Функция для устранения побочных эффектов функции гезебСЗЗ 
бипсбіоп гезбогеСЗЗ( еіеш, ргор ) { 

// Переустановка всех свойств и возвращение им первоначальных значений 
бог ( ѵаг і іп ргор ) 

еіеш.збуіе [ і ] = ргор[ і ]; 

} 


Имея возможность получить как текущую, так и потенциальную высоту и ширину элемента, вы можете 
попробовать применить некоторые анимационные эффекты, доступные благодаря использованию этих значений. 
Но перед тем как перейти к подробностям анимации, вам следует рассмотреть вопрос изменения видимости 
элемента. 

Видимость элемента 

Видимость элемента — довольно мощный инструмент, который может быть использован в ІаѵаЗсгірі для 
создания многих вещей, от анимации и эффектов и до быстрого вывода шаблонов. Но важнее всего то, что это 
свойство может быть использовано для быстрого устранения элемента из поля зрения пользователя, предоставляя 
ему некоторые основные возможности интерактивной работы. 

С использованием С5Б существует два различных способа эффективного устранения элемента из поля 
видимости, у каждого из которых есть как свои преимущества, так и непредвиденные последствия, в зависимости 
от того, как именно они будут использоваться: 

• Свойство ѵізіЬіИІу переключает видимость элемента, сохраняя при этом обычный ход формирования 
документа. Свойство ѵізіЬіІіІу может иметь два значения: видимый — ѵі5іЫе (по умолчанию) и скрытый — 
Мбсіеп (чтобы сделать элемент полностью невидимым). К примеру, если у вас есть текст, обрамленный 
тегами <Ь>, а его свойство ѵізіЬіІІІу установлено в Нісісіеп, это выразится в простом блоке пробелов в 
тексте, точно такого же размера, как и оригинальный текст. Сравните, к примеру две следующие 
текстовые строки: 

// Обычный текст: 

Неііо бобп, Ном аге уои бобау? 

// а теперь к элементу 'бобп' применено ѵізіЪіІібу: Ыббеп 
Неііо , Ном аге уои бобау? 

• Свойство сіізріау предоставляет разработчику более широкий выбор для управления формированием 
элементов. Этот выбор варьируется между линейным значением — іпііпе (такие теги, как <Ь> и <зрап> 
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являются линейными, потому что следуют обычному текстовому потоку), блочным значением — Ыоск 
(такие теги, как <р> и <сііѵ> являются блоками, потому, что они разбивают обычный текстовый поток), и 
значением попе (которое предписывает полное устранение элемента из документа). Результат установки 
для элемента свойства сіізріау выглядит, как будто вы только что удалили элемент из документа, но не 
полностью, поскольку позже он может быть быстро возвращен в поле видимости. Поведение свойства 
бі5рІау отображено в следующих строках: 

// Обычный текст: 

Неііо ііоЬп, Ьом аге уои босіау? 

// а теперь к элементу 'ЦоЬп' применено сіізріау: попе 
Неііо, ііоѵг аге уои бобау? 

Хотя у свойства ѵізіЬіІііу есть свои особенности применения, важность свойства сіізріау трудно 
переоценить. Тот факт, что при установке свойства ѵізіЬіІііу в бісісіеп элемент при обычном ходе формирования 
документа все еще существует, снижает возможность применения этого свойства в большинстве приложений. В 
листинге 7.11 показаны два метода, которые могут быть использованы для переключения видимости элемента с 
использованием свойства сіізріау. 

Листинг 7.11. Набор функций для переключения видимости элемента с использованием его С55-свойства 

сіізріау 

// Функция для скрытия элемента (с использование свойства сіізріау) 
іипсбіоп Ьісіе ( еіеш ) { 

// Определение текущего состояния свойства сіізріау 
ѵаг сигБізрІау = дебЗбуІе ( еіеш, 'сіізріау' ); 

// Запоминание состояния свойства сіізріау на будущее 
іі ( сигБізрІау != 'попе' ) 

еіеш.$ 0 ІсШізр 1 ау = сигБізрІау; 

// Установка сіізріау в попе (скрытие элемента) 
еіеш. збуіе . сіізріау = ' попе ' ; 

} 

// Функция показа элемента (с использованием свойства сіізріау) 
іипсбіоп зііоѵс ( еіеш ) { 

// Возвращение свойства сіізріау к тому значению, которое им 
// использовалось, или использование 

// 'Ыоск', если предыдущее состояние этого свойства не было 
// сохранено 

еіеш. зісуіе . сіізріау = еіеш. $о1сШ1зр1ау | | 

} 


Второй стороной видимости элемента является степень его прозрачности — орасііу. Корректировка 
степени прозрачности элемента приводит к результату, очень похожему на корректировку его видимости, но при 
этом предоставляет больше возможностей для управления его видимостью. Это означает, что вы можете получать 
элемент с 50% видимостью, и видеть элемент, который находится под ним. И опять-таки, несмотря на то, что все 
современные браузеры в известной степени поддерживают прозрачность, и Іпіегпеі: Ехріогег (что касается ІЕ 5.5), 
и ѴѴЗС-совместимые браузеры имеют различия в ее реализации. Чтобы обойти это обстоятельство, для управления 
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прозрачностью элемента нужно создавать стандартную функцию, показанную в листинге 7.12. Уровень О 
означает, что элемент полностью прозрачен, а уровень 100 — что он полностью непрозрачен. 

Листинг 7.12. Функция, предназначенная для корректировки уровня прозрачности элемента 

// Установка уровня прозрачности элемента 

// (где уровень является числом в диапазоне 0-100) 

Еипсбіоп зебОрасібу ( еіеш, Іеѵеі ) { 

// Если существуют какие-нибудь фильтры, значит, 

// мы имеем дело с ІЕ, и нужно устанавливать фильтр АІрЬа 
іі ( еіеш. Шбегз ) 

еіегп. збуіе. Ііібегз = ' аІрЬа (орасі1:у= ' + Іеѵеі + 

// В противном случае мы используем ѴОС-свойство орасібу 
еізе 

еіеш.збуіе.орасібу = Іеѵеі / 100; 

} 


Теперь, когда в вашем распоряжении имеются способы корректировки позиции, размера и видимости 
элемента, настало время приступить к исследованию некоторых забавных вещей, которые могут быть созданы при 
объединении всех имеющихся возможностей. 

Анимация 

Теперь, когда у вас уже имеются базовые знания, необходимые для осуществления ОНТМІ_-операций, 
давайте рассмотрим один из самых популярных и наглядных эффектов динамических веб-приложений: анимацию. 
Ее применение в разумных пределах может предоставить пользователю весьма полезную обратную реакцию 
приложения, к примеру, привлечение внимания к только что созданному на экране элементу. 

Начнем с рассмотрения двух различных широко распространенных анимационных приемов, а затем еще 
раз вернемся к этой теме при рассмотрении наиболее популярных ОНТМІ_-библиотек. 

Выплывание 

Первый анимационный эффект заключается в том, что берется скрытый (с использованием свойство 
сіізріау, установленного в попе) элемент, и вместо использования для его отображения довольно грубой функции 
5Іпоѵѵ(), вы постепенно, в течение секунды, проявляете этот элемент за счет увеличения его высоты. В 
листинге 7.13 показана функция, которую можно применить для замены функции 5Иоѵѵ() эффектом выпадения, 
который вызывает у пользователя более плавное визуальное впечатление. 

Листинг 7.13. Функция, предназначенная для медленного появления скрытого элемента за счет 
увеличения его высоты в течение секунды 

бипсбіоп зИсІеБомп ( еіеш ) { 

// Начало выплывания вниз с 0 
еіеш. збуіе . ЬеідЫ. = ' Орх ' ; 

// Показ элемента (но вы его не увидите, пока высота равна 0) 
зЬовд( еіеш ); 

// Определение полной, потенциальной высоты элемента 
ѵаг Ъ. = ІиІІНеідЫ; ( еіеш ); 
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// Мы собираемся за секунду показать анимацию, состоящую из 
// 20 'кадров' 

бог ( ѵаг і = 0; і <= 100; і += 5 ) { 

// Замкнутое выражение, гарантирующее, что у нас в распоряжении 
// находится именно та переменная 'і', которая нам нужна 
(бипсбіоп () { 

ѵаг роз = і; 

// Установка времени ожидания для совершения будущих 
// действий в определенное время 
зебТітеоиб ( бипсбіоп () { 

// Установка новой высоты элемента 

еіегп. збуіе . ЬеідЬб = ( роз / 100 ) * Ь ) + "рх"; 

}, ( роз + 1 ) * 10) ; 

}) () ; 

} 

} 

Проявление 

Следующий анимационный эффект, который мы собираемся рассмотреть, очень похож на предыдущий, но 
в нем используется функция 5еЮрасі1у( ), которая встраивается вместо модификации высоты. Конкретно наша 
функция (показанная в листинге 7.14) показывает скрытый элемент, а затем проявляет его за счет изменения 
степени непрозрачности от 0 (полностью прозрачен) до 100% (полностью непрозрачен). Во многом напоминая 
функцию, показанную в листинге 7.13, эта функция создает у пользователей более плавное визуальное 
впечатление. 

Листинг 7.14. Функция, предназначенная для медленного проявления скрытого элемента за счет 
увеличения в течение секунды его непрозрачности 

бипсбіоп бабеіп ( еіеш ) { 

// Начало непрозрачности с 0 
зеб0расібу( еіеш, 0 ); 

// Отображение элемента (но вы его не увидите, пока непрозрачность 
// равна 0) 
зЬом( еіеш ); 

// Мы собираемся за секунду показать анимацию, состоящую из 
// 20 'кадров' 

бог ( ѵаг і = 0; і <= 100; і += 5 ) { 

// Замкнутое выражение, гарантирующее, что у нас в распоряжении 
// находится именно та переменная 'і', которая нам нужна 
(бипсбіоп () { 

ѵаг роз = і; 

// Установка времени ожидания для совершения будущих 
// действий в определенное время 
зебТішеоиб ( бипсбіоп () { 
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// Установка новой степени прозрачности элемента 
зебОрасібу ( еіеш, роз ); 


} 


}, ( роз + 1 ) * 10); 

}) () ; 


Примеры этих, и других анимационных эффектов показаны в главе 9. 

Браузер 

После работы со специфическими ООМ-элементами, знания, позволяющие изменять или отслеживать 
настройки браузера и его компонентов, могут значительно улучшить взаимодействие пользователя с веб-сайтом. 
Два наиболее важных аспекта работы с браузерами заключаются в определении позиции указателя мыши, и 
определении степени прокрутки страницы пользователем. 

Позиция указателя мыши 

Определение позиции указателя мыши является важнейшим аспектом предоставления пользователю 
возможностей по перетаскиванию элементов и использованию контекстных меню, и обе эти возможности 
появляются только при использовании взаимодействия между ІаѵаЗсгірі и С55. 

Первые две переменные, значение которых нужно установить — это позиции х и у указателя мыши 
относительно всей веб-страницы (см. листинг 7.15). поскольку получить координаты указателя можно лишь с 
помощью событий, связанных с мышью, вам для их захвата потребуется использование общих событий мыши, в 
частности МоизеМоѵе или МоіюеОоѵѵп (дополнительные примеры показаны в разделе «Перетаскивание»), 

Листинг 7.15. Две универсальные функции для получения текущей позиции указателя мыши относительно 
всего пространства страницы 

// Получение горизонтальной позиции указателя 
бипсбіоп дебХ(е) { 

// нормализация объекта события 
е = е || міпбом.еѵепб; 

// Сначала получение позиции из браузеров, не относящихся к ІЕ, 

// а затем из ІЕ 

гебигп е.радеХ | | е.сІіепбХ + босшпепб .Ьосіу . зсгоІІЬебб; 

} 

// Получение вертикальной позиции указателя 
бипсбіоп дебУ(е) { 

// нормализация объекта события 
е = е || иіпбом.еѵепб; 

// Сначала получение позиции из браузеров, не относящихся к ІЕ, 

// а затем из ІЕ 

гебигп е.радеУ || е.сІіепбУ + боситепб.Ьобу. зсгоІІТор; 

} 
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В заключение будет полезно узнать о вторичных, связанных с мышью переменных, позициях указателя х и 
у, относительно того элемента, с которым в данный момент происходит взаимодействие. В листинге 7.16 
приведены две функции, которые можно использовать для извлечения этих значений. 

Листинг 7.16. Две функции, предназначенные для получения позиции указателя мыши относительно 
текущего элемента 

// Получение Х-позиции указателя относительно целевого элемента, 

// который используется в объекте события 'е' 
бипсбіоп дебЕІешепбХ ( е ) { 

// Определение соответствующего смещения элемента 
гебигп ( е && е.ІауегХ ) | | міпсіом . еѵепб . оббзебХ; 

} 

// Получение У-позиции указателя относительно целевого элемента, 

// который используется в объекте события 'е' 
бипсбіоп дебЕІешепбУ ( е ) { 

// Определение соответствующего смещения элемента 
гебигп ( е && е.ІауегУ ) | | міпсіом . еѵепб . оббзебУ ; 

} 


Когда в этой главе мы перейдем к разделу «Перетаскивание», то уделим внимание взаимодействию с 
мышью еще раз. Дополнительно, чтобы получить больше примеров, связанных с событиями мыши, нужно 
обратиться к главе 6 и приложению Б, в которых приведено значительно больше примеров работы с мышью. 

Область просмотра 

Областью просмотра браузера можно считать все, что находится внутри его полос прокрутки. Кроме этого 
область прокрутки состоит из нескольких компонентов: окна области просмотра, страницы и полос прокрутки. 
Определение точной позиции и размеров каждого из этих компонентов нужны для разработки четкого 
взаимодействия с протяженными частями содержимого (среди которых, к примеру, чат-окна с автопрокруткой). 

Размер страницы 

Первый набор свойств, требующих рассмотрения — высота и ширина текущей веб-страницы. Чаще всего 
бывает так, что большая часть просматриваемой страницы лежит за пределами области просмотра (что можно 
определить за счет проверки размеров области просмотра и позиции полосы прокрутки). В листинге 7.17 
показаны две функции, использующие вышеупомянутые свойства всгоІІѴѴІсШп и всгоІІНеідІіІ, которые уточняют 
полную возможную ширину и высоту элемента, а не только текущие отображаемые размеры. 

Листинг 7.17. Две функции, предназначенные для определения длины и ширины текущей веб-страницы 

// Возвращение высоты веб-страницы 

// (может изменяться при добавлении к странице нового содержимого) 
бипсбіоп радеНеідЬб () { 

гебигп босишепб.Ъобу. зсгоІІНеідЬб; 

} 

// Возвращение ширины веб-страницы 
бипсбіоп радеИіб'Ыт () { 

гебигп боситепб .Ьобу. зсгоІІКісІ'Ыі; 
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} 

Позиции полос прокрутки 

Теперь мы посмотрим, как определить позиции полос прокрутки браузера (или, в другом смысле, 
определить насколько вниз по странице переместилась область просмотра). Их числовые значения (которые 
можно получить при помощи функций, показанных в листинге 7.18) необходимы для предоставления 
динамической прокрутки в самом приложении, не принимая в расчет того, что предоставлено браузером 
изначально. 

Листинг 7.18. Две функции, предназначенные для определения, где находится область просмотра 
относительно верхней части документа 

// Функция для определения величины горизонтальной прокрутки браузера 
ЬипсЫоп зсгоІІХ () { 

// Сокращение на случай использования ІпЬегпеЬ Ехріогег 6 в строгом 
// (зЬгісЬ) режиме 

ѵаг сіе = босшпепЬ . боситепЬЕІетепі:; 

// Использование свойства браузера радеХОЫзеЬ, если оно доступно 
геЬигп зеІЬ . радеХОЫзеЬ | 

// в противном случае попытка получить прокрутку слева из 
// корневого узла 
( бе && бе . зсгоІІЬеЬЬ ) | 

//И наконец, попытка получить прокрутку слева из элемента Ьобу 
босшпепЬ.Ьобу. зсгоІІЬеЬЬ; 

} 

// Функция для определения величины вертикальной прокрутки браузера 
ЬипсЫоп зсгоІІУО { 

// Сокращение на случай использования ІпЬегпеЬ Ехріогег 6 в строгом 
// (зЬгісЬ) режиме 

ѵаг бе = босшпепЬ. боситепЬЕІешепЬ; 

// Использование свойства браузера радеУОЫзеб, если оно доступно 
гебигп зеіб .радеУОЫзеб | 

// в противном случае попытка получить прокрутку сверху из 
// корневого узла 

( бе && бе.зсгоІІТор ) | 

//И наконец, попытка получить прокрутку сверху из элемента Ьобу 
босшпепЬ.Ьобу. зсгоІІТор; 

} 


Перемещение полос прокрутки 
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Теперь, располагая текущим смещением полос прокрутки на странице и длиной самой страницы, можно 
рассмотреть предоставляемый браузерами метод зсгоІІТо, который можно использовать для корректировки 
текущей позиции области просмотра на странице. 

Метод бсгоііТо существует в виде свойства объекта ѵѵіпсіоѵѵ (или любого другого элемента, имеющего 
полосы прокрутки содержимого или <іГгате>) и принимает два аргумента, смещения х и у, необходимые для 
прокрутки области просмотра (или элемента, или <і(тате>). В листинге 7.19 показаны два примера 
использования метода бсгоііТо. 

Листинг 7.19. Примеры использования метода бсгоііТо для корректировки позиции области просмотра 
браузера 

// Если нужно осуществить прокрутку окна браузера до самого верха, можно 
// сделать следующее: 
иіпбозд' .5сго11То(0,0) ; 

// Если нужно осуществить прокрутку до позиции определенного элемента, можно 
// сделать следующее: 

иіпбозд' . зсгоІІТо ( 0, радеУ( босшпепЬ . деЬЕІетепЬВуІб ( "Ъосіу" ) ) ); 

Размер области просмотра 

Заключительный аспект области просмотра является, наверное, наиболее очевидным: это размер самой 
области. Знание размера области просмотра дает хорошее представление о том, какую часть содержимого 
пользователь может в данный момент видеть, независимо от разрешения экрана или размера окна браузера. Для 
определения значений размера можно воспользоваться двумя функциями, представленными в листинге 7.20. 

Листинг 7.20. Две функции, предназначенные для определения высоты и ширины области просмотра 
браузера 

// Определение высоты области просмотра 
іипсЬіоп міпбомНеідЫ; () { 

// Сокращение на случай использования Іпбегпеб Ехріогег 6 в строгом 
// (зЬгісЬ) режиме 

ѵаг сіе = боситепЬ . боситепЬЕІетепі;; 


// Использование свойства браузера іппегНеідЫ;, если оно доступно 
гебигп зеіі.ІппегНеідЫ; | 

// в противном случае попытка получить высоту из корневого узла 
( бе && бе . сІіепЬНеідЫ; ) | 

//И наконец, попытка получить высоту из элемента Ьобу 
босшпепЬ.Ьобу. сІіепЬНеідЫ;; 

} 

// Определение ширины области просмотра 
іипсбіоп міпбомИібЫт () { 

// Сокращение на случай использования ІпЬегпеІ; Ехріогег 6 в строгом 
// (зЬгісЬ) режиме 
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ѵаг сіе = сіосшпепб. сіоситепІсЕІешепі:; 

// Использование свойства браузера іппегМісНсіі, если оно доступно 
гебигп зеіі:. іппегМісН;Ъ. | 

// в противном случае попытка получить ширину из корневого узла 
( сіе && сіе . сІіепШісНсЪ. ) I 

//И наконец, попытка получить ширину из элемента Ьосіу 
сіоситепб . Ьосіу . сИепЫлПЬЫп; 


Пользу от работы с областью просмотра трудно переоценить. Взгляните на современные веб-приложения, 
к примеру, на СтаіІ или СатрГіге, и увидите в них примеры того, как манипуляции с областью просмотра 
приводят к вполне предсказуемым результатам (СтаіІ предоставляет контекстные накладки, а СатрЯге — чаты с 
автопрокруткой). В главе 11 будут рассмотрены другие способы возможного использования области просмотра, 
улучшающие восприятие веб-приложений с высоким уровнем интерактивности. 

Перетаскивание 

Одно из наиболее популярных пользовательских интерактивных действий, доступных в браузере — 
перетаскивания элемента по странице. Теперь, используя уже изученный материал (возможность определения 
позиции элемента, ее корректировки, и понимание различий между разными видами позиционирования), вы 
будете в состоянии полностью разобраться с тем, как работает система перетаскивания элементов. 

Для исследования этой технологии, я решил рассмотреть библиотеку ЭОМ-Эгад, созданную Аароном 
Будманом (Аагоп Вообтап) (Міір://Ьогіпд.уоипдрир.пеі/2001/сІотсігад). Его библиотека предоставляет массу 
полезных вещей, включая следующие: 

Описатели перетаскивания : У вас может быть один фактически перемещаемый родительский элемент, и 
другой, перетаскиваемый вместе с ним подэлемент. Это пригодится при создании элементов интерфейса, похожих 
на окна. 

Функции обратного вызова : Вы можете отслеживать определенные события, к примеру, когда 
пользователь начинает перетаскивание элемента, перетаскивает его, или завершает перетаскивание, а также 
получать информацию о текущем местоположении элемента. 

Минимальная и максимальная области перетаскивания: Вы можете в определенных пределах ограничить 
область перетаскивания элемента (к примеру, не дать его перетащить за пределы экрана). Это пригодится для 
создания полос прокрутки. 

Собственная система координат: Если вы не испытываете удобств при работе с системой координат СБ5, 
можно выбрать работу с любой комбинацией отображения координатной системы х/у. 

Собственное преобразование системы координат х и у: Вы можете заставить перетаскиваемый элемент 
двигаться необычными способами (по пульсирующей или круговой колебательной траектории). 

Использование системы ЭОМ-Огад не представляет особых трудностей. Сначала к элементу прикрепляется 
обработчик перетаскивания (кроме этого могут быть определены любые дополнительные варианты работы), а 
также любые дополнительные функции наблюдения. Некоторые примеры использования ООМ-Эгад приведены в 
листинге 7.21. 
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Листинг 7.21. Использование ООМ-Эгад для имитации перетаскиваемых окон 


<Ы:ш1> 

<ііеасІ> 

<біі:1е>ВОМ-Вгад — демонстрация перетаскиваемого окна </бі'Ые> 

<зсгірб згс="с!отсІгад . д з" 'Ьуре="1;ехі:/д аѵазсгірС'х/зсгірО 
<5сгірб Суре="1;ех1:/д аѵазсгірб"> 
міпсіом . опіоасі = бипсбіоп () { 

// Инициализация функции ВОМ-Вгад, при которой элемент, 

// имеющий ІБ 'иіпсіом', становится перетаскиваемым 
Вгад.іпіб( босшпепб . дебЕІетепбВуІсІ ( "міпсіом" ) ); 

} ; 

</зсгірО 
<збу1е> 

#ИІПСІО\л7 { 

Ъогбег: Ірх зоіісі #ББВ; 

Ъогбег-бор : 15рх зоіісі #ВВВ; 
місНсіі: 250рх; 

ЬеідЫ;: 250рх; 

} 

</збу1е> 

</ЬеасІ> 

<ЪосІу> 

<Ы>ВгаддаЫе Кіпсіом' Вешо</Ы> 

<сііѵ ісі="міпсіом">Я — перетаскиваемое окно, можете попробовать меня 

перетащить ! </ сііѵ> 

</ЪосІу> 

</Ы:ш1> 

Полностью документированная копия библиотеки ООМ-Огад показана в листинге 7.22. Код присутствует в 
виде единого глобального объекта, чьи методы могут быть вызваны для объектов для инициализации процесса 
перетаскивания. 

Листинг 7.22. Полностью документированная библиотека ООМ-Огад 

ѵагВгад = { 

// текущий перетаскиваемый элемент 
оЪд : пиіі, 

// функция инициализации для перетаскиваемого объекта 

// о = элемент, действующий в качестве описателя перетаскивания 

// оКооб = перетаскиваемый элемент, если не определено другое, 

// описатель будет перетаскиваемым элементом. 

// шіпХ, шахХ, гпіпУ, тахУ = минимальные и максимальные координаты, 

// разрешенные для элемента 

// ЬЗмарНоггКеі = переключатель горизонтальной системы координат 
// ЬЗмарѴегбКеі = переключатель вертикальной системы координат 
// іхМаррег, іуМаррег = функции для преобразования координат х и у 
// в другие координаты 
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іпіб: бипсбіоп(о, оКооб, шіпХ, шахХ, шіпУ, 

шахУ, ЪЗмарНоггКеб, ЪЗмарѴегбКеб, бХМаррег, бУМаррег) { 

// Отслеживания начала перетаскивания 
о . оптоизебоип = Бгад.збагб; 

// Определение используемой системы координат 
о.бшюсіе = ЪЗмарНоггКеб ? баізе : бгие ; 
о.ѵтосіе = ЪЗмарѴегбКе б ? баізе : бгие ; 

// Определение элемента, который служит описателем перетаскивания 
о.гооб = оКосЬ && оКооб != пиіі ? оКооб : о ; 

// Инициализация указанной системы координат 
іб (о.Нтосіе && ізИаИ (рагзеіпб (о . гооб. збуіе . 1е бб ))) 
о. гооб. збуіе . 1еЛ: = "Орх"; 
іб (о.ѵшосіе && ізИаІі (рагзеіпб (о . гооб . збуіе . бор ))) 
о.гооб.збуіе. бор = "Орх"; 

іб (Іо.ПтосІе && ізИаИ (рагзеіпб (о . гооі: . збуіе . гідПб ))) 
о.гооб.збуіе.гідПб = "Орх"; 
іб ( (о.ѵшосіе && ізИаИ(рагзеіпб(о.гооб.збуіе .Ъоббот) )) 
о.гооб.збуіе. Ъоббот = "Орх"; 

// Проверка предоставления пользователем минимальных и 
// максимальных значений координат х и у 


о.шіпХ = 

буреоб 

шіпХ 

!= ' ипсіебіпесі ' 

? 

шіпХ 

: пиіі; 

о.шіпУ = 

буреоб 

шіпУ 

!= 'ипсіебіпесі' 

9 

шіпУ 

: пиіі; 

о.шахХ = 

буреоб 

шахХ 

!= 'ипсіебіпесі' 

9 

шахХ 

: пиіі; 

о.шахУ = 

буреоб 

шахУ 

!= 'ипсіебіпесі' 

9 

шахУ 

: пиіі; 


// Проверка на существование любых заданных преобразователей 
// х и у координат 

о.хМаррег = бХМаррег ? бХМаррег : пиіі; 
о.уМаррег = бУМаррег ? бУМаррег : пиіі; 

// Добавление оболочки для всех функций, определяемых пользователем 
о. гооб .опБгадЗбагб = пей ЕипсбіопО; 

о . гооб . опБгадЕпсі = пем ЕипсбіопО; 
о. гооб .опБгад = пем ЕипсбіопО; 


збагб: бипсбіоп(е) { 

// Определение перетаскиваемого объекта 
ѵаг о = Бгад.о^ = іМз; 

// Нормализация объекта события 
е = Бгад. біхЕ (е); 




// Получение текущих координат х и у 

ѵаг у = рагзеіпб (о . ѵтосіе ? о.гооб. збуіе .бор : о . гооП . зПуІе .ЬоППош) ; 
ѵаг х = рагзеІпП (о . Ьтобе ? о.гооб. збуіе . Іеіб : о.гооб. збуіе . гідЬб ) 

// Вызов функции пользователя с текущими координатами х и у 
о.гооП.опБгадЗПагП(х, у); 

// Запоминание начальной позиции указателя мыши 
о. ІазбМоизеХ = е.сІіепбХ; 
о. ІазбМоизеУ = е.сІіепбУ; 

// Если используется система координат СЗЗ 
іі (о.Ьтобе) { 

// установка шіп и шах координат там, где они применяются 
іі (о.шіпХ != пиіі) о.шіпМоизеХ = е.сІіепбХ -х + о.шіпХ; 

іі (о.шахХ != пиіі) о.шахМоизеХ = о.шіпМоизеХ + о.шахХ -о.шіпХ; 

//В противном случае применение обычной математической системы 
//координат 
} еізе { 

іі (о.шіпХ != пиіі) о.шахМоизеХ = -о.шіпХ + е.сІіепПХ + х; 
іі (о.шахХ != пиіі) о.шіпМоизеХ = -о.шахХ + е.сІіепПХ + х; 

} 

// Если используется система координат СЗЗ 
іі (о. ѵтосіе) { 

// установка шіп и тах координат там, где они применяются 
іі (о.шіпУ != пиіі) о.шіпМоизеУ = е.сІіепПУ -у + о.шіпУ; 

іі (о.шахУ != пиіі) о.шахМоизеУ = о.шіпМоизеУ + о.шахУ -о.шіпУ; 

// В противном случае применение обычной математической системы 
//координат 
} еізе { 

іі (о.шіпУ != пиіі) о.шахМоизеУ = -о.шіпУ + е.сІіепПУ + у; 
іі (о.шахУ != пиіі) о.шіпМоизеУ = -о.шахУ + е.сІіепПУ + у; 

} 

// отслеживание событий перетаскивания и завершения 
// перетаскивания 
боситепП . опшоизешоѵе = Бгад.сігад; 
боситепП .оптоизеир = Бгад.епб; 

геПигп іаізе; 


// Функция, предназначенная для отслеживания всех перемещений 
// указателя мыши в ходе события перетаскивания 
бгад: іипсбіоп (е) { 



// Нормализация объекта события 
е = Бгад. біхЕ (е); 

// получение нашей ссылки на перетаскиваемый элемент 
ѵаг о = Бгад.оЪ^ 

// получение позиции указателя мыши в пределах окна 
ѵаг еу = е.сІіепбУ; 
ѵаг ех = е.сІіепбХ; 

// Получение текущих координат х и у 

ѵаг у = рагзеіпб (о. ѵтосіе ? о.гооб. збуіе .бор : о.гооб. збуіе .Ъоббот); 
ѵаг х = рагзеіпб (о. Ішюсіе ? о.гооб. збуіе . Іебб : о.гооб. збуіе . гідНб ) 
ѵаг пх, пу; 

// Если была установлена минимальная позиция X, убедиться в том, 

// что она не пройдена 

іб (о.тіпХ != пиіі) ех = о.Нтобе ? 

МабЬ..тах(ех, о.тіпМоизеХ) : МабЬ.. тіп (ех, о.шахМоизеХ); 

// Если была установлена максимальная позиция X, убедиться в том, 

// что она не пройдена 

іЕ (о.тахХ != пиіі) ех = о.Нтобе ? 

МабН .тіп (ех, о.тахМоизеХ) : МабН.тах(ех, о.тіпМоизеХ); 

// Если была установлена минимальная позиция У, убедиться в том, 

// что она не пройдена 

іі (о.тіпУ != пиіі) еу = о.ѵтобе ? 

МабН.тах(еу, о.тіпМоизеУ) : МабН .тіп (еу, о.тахМоизеУ); 

// Если была установлена максимальная позиция У, убедиться в том, 

// что она не пройдена 

іі (о.тахУ != пиіі) еу = о.ѵтобе ? 

МабН .тіп (еу, о.тахМоизеУ) : МабН.тах(еу, о.тіпМоизеУ); 

// Вычисление координат х и у последнего перемещения 
пх = х + ((ех -о. ІазбМоизеХ) * (о.Нтобе ? 1 : -1)) ; 
пу = у + ((еу -о. ІазбМоизеУ ) * (о.ѵтобе ? 1 : -1)) ; 

// и преобразование их с помощью х или у функции преобразования 
// координат (если таковая предоставлена) 
іі (о.хМаррег) пх = о.хМаррег(у) 
еізе іі (о.уМаррег) пу = о.уМаррег(х) 

// Установка для элемента новых х и у координат 

Бгад.о)^ .гооб. збуіе [о.Нтобе ? "Іеіб" : "гідЬб"] = пх + "рх"; 

Бгад.оЬ^.гооб. збуіе [о. ѵтобе ? "бор" : "Ьоббот"] = пу + "рх"; 
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// и запоминание последней позиции указателя мыши 
Бгад. оЬ^ . ІазбМоизеХ = ех; 

Бгад. оЪ;і . ІазШоизеУ = еу; 

// Вызов пользовательской функции опБгад с текущими координатами 
// х и у 

Бгад. оЪ;і . гооі: . опБгад (пх, пу) ; 

гебигп баізе; 

Ь 


// Функция, обрабатывающая завершение события перетаскивания 
епб: бипсбіоп() { 

// События мыши больше не отслеживать (поскольку перетаскивание 
// уже произошло) 
боситепб. опшоизешоѵе = пиіі; 
боситепб.оптоизеир = пиіі; 

//В конце перетаскивания вызов нашей специальной функции 
/ / опБгадЕпб с координатами элемента х и у 
Бгад. оЬ^ . гооб . опБгадЕпб ( 

рагзеіпб (Бгад..гооб. збуіе [Бгад.оЬ^.бппобе ? "Іебб" : "гідбб"]), 
рагзеіпб (Бгад. оЬ ^ . гооб . збуіе [Бгад. оЬ ^ . ѵтосіе ? "бор" : "Ъоббот"])); 
// N0 Іопдег иабсЪ. бііе об^есб бог бгадз 
Вгад.об^ = пиіі; 

}, 


// Функция, предназначенная для нормализации объекта события 
біхЕ: бипсбіоп(е) { 

// Если объекта события не существует, значит это ІЕ, и нужно 
// предоставить объект события ІЕ 
іб (буреоб е == ' ипбебіпесі ' ) е = міпбом.еѵепб; 

// Если свойство Іауег не установлено, получение 
// значений из эквивалентного свойства оббзеб 

іб (буреоб е.ІауегХ == 'ипбебіпесі') е.ІауегХ = е.оббзебХ; 
іб (буреоб е.ІауегУ == 'ипбебіпесі') е.ІауегУ = е.оббзебУ; 

гебигп е; 

} 

} ; 


Если честно, то ЭОМ-Огад, возможно, лишь одна из сотен ІаѵаЗсгірІі-библиотек перетаскивания. Тем не 
менее, к ней у меня особое пристрастие, благодаря ее качественному объектно-ориентированному синтаксису и 
относительной простоте. В следующем разделе я рассмотрю библиотеку Бсгіріасиіоиз, которая обладает 
превосходной и мощной реализацией перетаскивания, которую я настоятельно рекомендую опробовать в работе. 


Библиотеки 
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Если нужно разработать какой-нибудь эффект или средство взаимодействия, может получиться так же, как 
и со многими другими трудоемкими задачами в ІаѵаЗсгірІ: — вполне вероятно, что подобная вещь уже была 
создана. Давайте проведем краткий обзор трех разных библиотек, предоставляющих различные средства ОНТМІ_- 
взаимодействия, чтобы получить представление о том, что вам доступно, как разработчику. 

тоо.іх и ](2иегу 

Есть две небольшие библиотеки, которые очень хорошо подходят для управления простыми эффектами: 
тоо.іх и ]<3иегу. Обе они предоставляют основные комбинации эффектов, которые могут быть объединены для 
создания вполне впечатляющей, но несложной анимации. Дополнительная информация о каждой из этих 
библиотек может быть найдена на связанных с ними веб-страницах. В листинге 7.23 приведены некоторые 
основные примеры использования этих библиотек. 

Листинг 7.23. Основные примеры анимации, получаемой с использованием библиотек тоо.Гх и ]<3иегу 

// Простая анимация, в которой скрытый элемента сначала показывается 
// за счет расширения, а потом, когда этот процесс завершится, 

// снова сжимается 

// Реализация этого анимационного эффекта в шоо.бх 
пей іх.НеідЫ;( "зісіе", { 
сіигабіоп: 1000, 
опСошрІебе: бипсісіоп () { 

пем іх.НеідЫ;( "зісіе", { сіигабіоп: 1000 } ) .Ітісіе () ; 

} 

}). зЬовд (); 

// Реализация в ^^ие^у 

$ ("#зісІе") . зИсІеБомп ( 1000, іипсбіоп () { 

$ (Шз) . зИйеЮр ( 1000 ); 

}) ; 

// Еще одна простая анимация, в которой высота, ширина и непрозрачность 
// элемента одновременно сокращаются (или уменьшаются), чем достигается 
// довольно интересный эффект скрытия 


// Реализация этого анимационного эффекта в шоо.іх 
пем іх.СошЬо( "Ъосіу", { 

ПеідЫ;: Сгие, 
місНгЬ: Сгие, 
орасібу: Сгие 
}) .Ъі<3е () ; 

// Реализация анимации в ^^ие^у 
$ ("#Ьосіу") .Ьісіе ( "іазб" ); 

Наверное, судя по примерам, вы сможете сказать, что библиотеки тоо.іх и іС^иегу действительно 
упрощают создание некоторых, довольно тонких анимационных эффектов. В обоих проектах на их веб-сайтах 
представлено множество примеров их кода в действии, что может послужить великолепным способом изучения 
механизмов работы несложной ІаѵаЗсгірі-анимации: 
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• Домашняя страница тоо.Гх: Іпіііір ://тоо^х. тасІ4т Мк. пеі;/ 

• Примеры документации тооІооІкН:: Иир://тооГх.тасі4тіІк.пе1;/сІоситепіа1;іоп/ 

• Домашняя страница )<3иегу: ІтН:р://)диегу.сот/ 

• Документация по эффектам и примеры )<3иегу: ИіфѴ^диегу.сот/сіосз/Гх/ 

Зсгіріасиіоиз 

Если потребовалось бы возвести на королевский трон какую-нибудь из ОНТМІ_-библиотек, то речь 
могла бы идти только о Зсгірііасиіоив. Построенная на основе популярной библиотеки Ргоіюіуре, ЗсгіріасиІоиБ 
предоставляет огромное количество различных интерактивных средств, то есть практически все, от анимаций и 
эффектов, до интерактивных действий (например, перетаскивания). На веб-сайте Зсгірііасиіоив может быть 
найдена масса сведений и примеров: 

• Домашняя страница: НіЕЕр://5СгірЕ.асиіо. из/ 

• Документация: НІІрѴ/ѵѵікі.вспрбасиІо.ив/зспрІіасиІоиз/ 

• Демонстрационные программы: ІпйрѴ/ѵѵікі.всгірІі.асиІо.иБ/всгірІіасиІоив/БІіоѵѵ/Оетоз/ 

Одной из областей, в которой Зсгірііасиіоив предоставляет наивысший уровень возможностей, сохраняя 
при этом наилучший уровень простоты использования, является перетаскивание. Чтобы вы смогли составить себе 
представление, я привожу два простых примера. 

Перестроение путем перетаскивания 

Одной из задач, решаемых легко и просто с помощью Зсгіріасиіоив является перестроение списков. Если 
принять во внимание простоту кода (и легкость получения доступа к функциональным возможностям А^ах, 
продемонстрированную на веб-сайте библиотеки), это решение настоятельно рекомендуется для большинства 
веб-разработчиков. Пример, показанный в листинге 7.24 представляет собой перестраиваемый список, созданный 
с использованием библиотеки Зсгірііасиіоиз. 

Листинг 7.24. Способ создания списка, перестраиваемого за счет технологии, доступной в библиотеке 
ЗсгірІіасиІоиБ 

<Ьбт1> 

<ЬеасІ> 

<біб1е>зсгірб . асиіо . из — демонстрация перестроения путем 
перетаскивания </біб1е> 

<зсгірб згс="ргобобуре . ) з" буре="бехб/) аѵазсгірб"Х/зсгірб> 

<зсгірб згс="зсгірбаси1оиз . ) з" буре="бехб/) аѵазсгірб"Х/зсгірб> 

<зсгірб згс="еббесбз .)з" буре="бехб/) аѵазсгірб"Х/зсгірб> 

<зсгірб згс="сІгадсІгор. ) з" буре="бехб/) аѵазсгірб"х/зсгірб> 

<зсгірб буре="бехб/ ) аѵазсгірб"> 
міпсіои. опіоасі = бипсбіоп(){ 

// Превращение элемента с ісі равным 'Изб' в перетаскиваемый, 

// перестраиваемый список 
ЗогбаЫе . сгеабе ( ' Іізб ' ) ; 

} ; 

</зсгірб> 

</ЬеасІ> 

<ЪосІу> 

<Ы>Перестроение путем перетаскивания</Ы> 
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<р>Чтобы перестроить элемент его нужно перетащить.</р> 


<и1 іб="1ізб"> 


<1і>Элемент Іі 

[- 1</1і> 

<1і>Элемент Іі 

I! 2</1і> 

<1і>Элемент Іі 

I- 3</1і> 

<1і>Элемент Іі 

I! 4</1і> 

<1і>Элемент Іі 

I- 5</1і> 

<1і>Элемент Іі 

I- 6</1і> 


</и1> 

</Ъобу> 

</Пбт1> 

Я надеюсь, что этот пример убедит вас в мощности, заключенной внутри этой библиотеки, но если этого 
недостаточно, вы можете посмотреть следующий пример создания управляющего элемента — ползунка для ввода 
данных. 

Ползунок для ввода данных 

Библиотека Зсгіріасиіоиз предоставляет ряд управляющих элементов, которые можно использовать для 
решения общих вопросов разработки интерфейса. Управляющий элемент, который нетрудно получить с 
использованием большинства библиотек перетаскивания — это ползунок для ввода данных (сдвигающийся 
ползунок для получение числового ввода) и Зсгірііасиіоиз в этом смысле не исключение, о чем свидетельствует 
код, представленный в листинге 7.25. 

Листинг 7.25. Использование ползунка для ввода данных из библиотеки Зсгірііасиіоиз, чтобы получить 
альтернативный способ ввода в форму вашего возраста 

<Пбт1> 

<ПеасІ> 

<бі1;1е>зсгірб . асиіо . из — демонстрация ползунка для ввода данных</біб1е> 

<зсгірб згс="ргобобуре . ) з" буре="бехб/^ аѵазсгірб"х/зсгірб> 

<зсгірб згс="зсгірбаси1оиз о з" буре="бех1;/^ аѵазсгірб"х/зсгірО 
<зсгірб згс="еббесСз о з" буре="бех1;/^ аѵазсгірС'х/зсгірО 
<зсгірб згс="с1гадсІгор.) з" буре="бех1;/^ аѵазсгірб"х/зсгірб> 

<зсгірб згс="сопбго1з.^з" буре="бех1;/^ аѵазсгірб"х/зсгірб> 

<зсгірб буре="бех1;/ ^ аѵазсгірб"> 
міпбом.опіоаб = іипс1:іоп() { 

// Превращение элемента, имеющего значение ІБ, равное адеНапсіІе, 

// в ползунок, и элемента, имеющего значение ІБ, равное адеВаг, 

// в шкалу ползунка 

пем Сопбгоі.Зіібег( ' адеНапсіІе' , 'адеВаг', { 

// При перемещении или завершении перемещения ползунка 
/ / вызывается функция ирбабеАде 
опЗІібе: ирбабеАде 

}) ; 


// Обработка любых перемещений ползунка 
бипсбіоп ирбабеАде(ѵ) { 



160 


// при обновлении позиции ползунка, обновление значения 
// элемента аде с целью представления текущего возраста 
// пользователя 

$('аде'). ѵаіие = Марк. Сіоог ( ѵ * 100 ); 

} 

} ; 

</ 5СГІрб> 

</Ьеаб> 

<Ьобу> 

<Ы>Демонстрация ползунка для ввода данных </Ы> 

<богш асбіоп="" шебЬосі=" Р03Т"> 

<р>Сколько Вам лет? <іприб буре="бехб" паше="аде" ісі="аде" /></р> 

<біѵ ісі="адеВаг" збу1е="иісібЬ : 200рх; Ьаскдгоипб: #000; ЬеідЬб : 5рх; "> 
<біѵ ісІ="адеНапс11е" збу1е="місібЬ : 5рх; ЬеідЬб : Юрх; 

Ьаскдгоипб: #000; сигзог :люѵе; "></сііѵ> 

</біѵ> 

<іприб буре="зиЬшіб" ѵаіие="ЗиЬшіб Аде"/> 

</#огш> 

</Ьобу> 

</Ьбш1> 


Я настоятельно советую, прежде чем решиться на создание какого-нибудь следующего интерактивного 
средства проверить его наличие в некоторых ОНТМб-библиотеках, следуя тому простому факту, что авторы 
библиотек скорее всего уже затратили больше времени и усилий на разработку именно этого средства, чем вы на 
создание всего своего приложения. Широкое использование библиотек наверняка позволит вам существенно 
сэкономить время на разработке приложения. 

Вывод 

Возможности, открывающиеся в веб-приложении при использовании динамических интерактивных 
средств, предоставляют замечательные способы достижения новых уровней скорости и удобства работы ваших 
пользователей. Кроме того, при использовании любых популярных библиотек, вы сможете значительно снизить 
сроки разработки приложения. В следующей главе мы объединим все изученные в этой главе интерактивные 
технологии для создания полноценного интерактивного приложения. 

В этой главе мы рассмотрели все многообразие технологий, направленных на достижение необходимого 
уровня симбиоза между ІаѵаЗсгірІ: и С55. В результате была получена возможность создания впечатляющих 
анимационных эффектов и динамических средств взаимодействия с пользователем. 

Необходимо помнить, что добавления на веб-страницу любых форм динамической интерактивности может 
отпугнуть часть вашей аудитории. Нужно всегда заботиться о том, чтобы ваше приложение не теряло удобств в 
работе с ним, даже если будут отключены ІаѵаЗсгірІ или С55. Создание приложения, способного с легкостью 
работать в упрощенном режиме, должно быть идеалом для любого ІаѵаЗсгірІ- разработчика. 
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Глава 8 Усовершенствование форм 

Формы являются средством получения от пользователя структурированных данных, и поэтому имеют для 
веб-разработчиков особую важность. По своей сути, форма имеет совсем немного ограничений на действия 
пользователя, на характер вводимых им данных, и на то, в каком качестве ее использовать. 

На той стадии разработки, когда уже создана семантически развитая форма, настает время добавить к ней 
код ІаѵаЗсгірІ:, предоставляющий пользователю дополнительную ответную реакцию. Зная как или почему с 
формой может что-то произойти, пользователь сможет быстрее ее заполнить, и получить от работы с ней лучшее 
впечатление. 

В этой главе мы собираемся рассмотреть выполнение основной проверки формы на стороне клиента и 
предоставление пользователю результатов этой проверки вполне толковым и ненавязчивым образом. Затем мы 
собираемся рассмотреть ряд способов, позволяющих повысить общие удобства пользования формой. Объединение 
этих двух технологий может быть использовано для предоставления пользователям существенно улучшенных 
форм, заполнение которых может превратиться в сплошное удовольствие. 

Проверка данных формы 

Добавление к веб-странице проверки формы на стороне клиента может обеспечить пользователям 
ускорение работы, но без особых выгод: проверка формы на стороне клиента никогда не заменит проверку на 
стороне сервера, она ее может только усилить. Стало быть, добавление к веб-странице проверки формы на 
стороне клиента — превосходный пример уже изученной вами ненавязчивой технологии разработки сценариев. 

Перед тем как приступить к составлению любого, связанного с формой сценария, нужно создать форму и 
убедиться в том, что она работает как и планировалось (например, проверка пользовательского ввода, выдача 
соответствующих сообщений об ошибках, и т. д.). В этой главе мы собираемся использовать семантически 
выверенную ХНТМ1_-форму. Внутри этой формы все элементы < і приО имеют четкую классификацию (например, 
элементы, по своему типу относящиеся к тексту, имеют в атрибуте сіазз значение Ііехі:), и содержатся внутри 
соответствующих наборов полей с точными обозначениями. Все это можно увидеть в листинге 8.1. 

Листинг 8.1. Простая ХНТМІ_-форма, которую можно улучшить за счет ІаѵаЗсгірІ 


<Ы;ш1> 

<Ьеа<3> 

<'Ьі'1;1е>Простая форма</Сі'Ые> 

</ЬеасІ> 

<ЪосІу> 

<богш асбіоп="" теСЬос^"РОЗТ"> 

<ііе1<35еС с1азз="1одіп"> 

<1едепсІ>Регистрационные данные</1едепсІ> 

<1аЪе1 бог="изегпаше" с1азз="Ьоѵег">Имя пользователя</1аЬе1> 
<іпри1; 1;уре="Сех1;" ісі="изегпаше" с1азз="гедиіге<3 Сех1;"/> 

<1аЪе1 бог="разз\л7ог<3" с1азз="Ьоѵег">Пароль</1аЬе1> 

<іпри1; буре="раззмогсІ" Іс1="разз\люгс1" с1азз="гедиіге<3 Сех1;"/> 
</ігіеІсІзеО 
<б1е1<3зеб> 

<1едепсІ>Личные сведения</ 1едеп<3> 


<1аЪе1 іог="паше">Имя</1аЬе1> 
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<іпри , Ь буре="1;ех1;" ісі="паше" с1азз="гедиігесІ бех1;"/><Ъг/> 

<1аЬе1 Тог="етаі1">Адрес электронной почты</1аЬе1> 

<іприб ^уре="'Ьех'Ь" ісі="ешаі1" с1азз="гедиігесІ ешаіі бехС"/><Ъг/> 

<1аЬе1 Тог="сІа1;е">Дата</1аЪе1> 

Сіприб буре="1:ехб" І<3="с1а1:е" с1азз="гедиігесІ бабе бехб"/><Ъг/> 

<1аЬе1 Тог="иг1">Веб-сайт</1аЬе1> 

<іприб буре="бехб" ісі="иг1" с1азз="иг1 бехб" ѵа1ие="Ы:1:р://"/><Ьг/> 

<1аЬе1 Тог="р]топе">Телефон</1аЪе1> 

Сіприб буре="бех1;" ісі="рЬопе" с1азз="рЬопе бехб"/><Ъг/> 

<1аЬе1 Тог="аде">Вам уже исполнилось 13 лет?</1аЬе1> 

<іприб буре="сЬеск:Ъох" ісі="аде" паше="аде" ѵаіие="уез"/><Ьг/> 

<іприб буре="зиЪтіб" ѵа1ие="8иЪтіб Рогш" с1азз="зиЪтіб"/> 

</Тіе1сІзе1;> 

</Тогт> 

</Ьо<Зу> 

</Ъбт1> 

Следующий шаг заключается в применении к форме некоторых основных С55-стилей, чтобы придать ей 
более приглядный вид. Это поможет вам в следующих разделах главы подобающим образом отобразить 
сообщения об ошибках и ответную реакцию. Используемая в форме С5Б показана в листинге 8.2. 

Листинг 8.2. Таблица стилей С55, используемая для улучшения внешнего вида вашей формы 

Тогш { 

Топб-Татііу : Агіаі; 

Топб-зіге : 14рх; 
місИ;]!: ЗООрх; 

} 

Тіеісізеб { 

Ъогбег: Ірх зоіісі #ССС; 
тагдіп-Ъоббот: Юрх; 

} 

Тіеісізеб. Іодіп іприб { 

\лгіс11лТі: 125рх; 

} 

Іедепсі { 

ТопС-'меідЫ:: Ьоісі; 

Топб-зіге: 1.Іеш; 


} 
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ІаЪеІ { 

сіізріау: Ыоск; 
місНгЬ: 60рх; 

Сехб-аіідп: гідЫ;; 
ііоаб: ІеТС; 
расІсІіпд-гідЫ;: Юрх; 
шагдіп: 5рх 0; 

} 

іприб { 

шагдіп: 5рх 0; 

} 

іприб.СехС { 

расісііпд: 0 0 0 Зрх; 
місНгЬ: 172рх; 

} 

іприі:. зиЬшіР { 

шагдіп: 15рх 0 0 70рх; 

} 


Копия экрана, показанная на рис. 8.1, даст вам достаточное представление о внешнем виде формы 
(готовой к наслоению новых режимов работы за счет использования ІаѵаЗсгірІ:). 


І-одіп Іптс 

Узегпате 

РаззѵіЮгсІ 

ігтаііоп 

1 

1 


гсі эиі \<х\ і 

Ыате 

ЕтаіІ 

йаіе 

ѴѴеЬзііе 

РИопе 

Оѵег 13? 1 

шиі іііаииі і 




Ьир:// 

Г 


БиЬтіі Рогт 


Рис. 8.1. Копия экрана стилизованной формы, к которой будет добавляться новый режим работы за счет 
применения ІаѵаЗсгірІ; 

Теперь, имея в своем распоряжении хорошо стилизованную форму, можно приступать к углубленному 
рассмотрению вопросов проверки формы на стороне клиента. Для этой проверки существует ряд технологий, 
наиболее часто применяемых к формам. Все эти технологии вращаются вокруг обеспечения того, что данные 
введенные пользователем в форму, соответствуют ожиданиям программы на серверной стороне. 
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Главное преимущество обеспечение проверки на стороне клиента состоит в том, что у пользователей 
появляется практически мгновенная ответная реакция относительно введенных ими данных, которая помогает 
лишь улучшить общее впечатление от ввода информации в форму. Должно быть абсолютно ясно, что решение о 
реализации проверки формы на стороне клиента, не означает, что нужно убрать или проигнорировать проверку 
на стороне сервера. Проверка формы должна продолжаться и при выключенном ]аѵа5сгір1;, обеспечивая 
пользователям, не имеющим включенного ІаѵаЗсгірІ:, возможность ее дальнейшего использования. 

В этом разделе мы собираемся рассмотреть определенный код, необходимый для проверки ряда 
различных элементов ввода данных, чтобы удостовериться, что они содержат определенные данные, 
востребованные формой. По отдельности каждая из этих проверочных процедур может и не играть особой роли, 
но в совокупности они могут обеспечить полный набор для проверки и тестирования, показанный в следующем 
разделе. 

Обязательные поля 

Возможно, самая важная из всех проводимых проверок полей, относится к проверке обязательного поля 
(это значит, что пользователь обязательно должен ввести в него данные). В большинстве случаев это требование 
может быть сведено к проверке того, что это поле не пустое. Но иногда у поля может быть уже введенное в него 
значение по умолчанию, а это значит, что у вас должна быть проверка, учитывающая такую возможность, и 
позволяющая убедиться в том, что пользователь как минимум внес в предоставленные полем данные хотя бы 
какие-нибудь изменения. Эти две проверки охватывают большинство полей формы, включая <іприі Іуре="ІехІ">, 
<5еІесі> и <1ех1:агеа>. 

Но проблемы возникают при попытке обнаружить, изменял ли пользователь значения обязательных полей 
флажков или переключателей. Чтобы обойти эту проблему нужно найти все поля с таким же названием (которые 
составляют совокупность элементов поля), а затем проверить, устанавливал ли пользователь любой из них. 

Пример проверки обязательных полей показан в листинге 8.3. 

Листинг 8.3. Проверка на модификацию обязательного поля (включая флажки и переключатели) 

// Универсальная функция проверки элемента ввода на наличие введенной 
// информации 

ГипсСіоп скескВедиігесІ ( еіеш ) { 

іГ ( еіеш. Суре == "сЬескЬох" | | еіеш. Суре == "гасііо" ) 
геСигп деСІприСзВуЛате ( еіеш. паше ) .питСЬескеб; 
еізе 

геСигп еіеш. ѵаіие. ІепдСЬ. > 0 && еіеш.ѵаіие != еіеш. беГаиІСѴаІие; 

} 

// Обнаружение всех элементов ввода с определенным именем (для обнаружения 
// и работы с флажками и переключателями) 

СипсСіоп деСІприСзВуЛаше( паше ) { 

// Массив для подходящих входных элементов 
ѵаг гезиІСз = []; 

// Отслеживание, сколько из них было установлено 
гезиІСз .питСЬескеб = 0; 

// Обнаружение всех элементов ввода в документе 
ѵаг іприС = босишепС. деСЕІетепСзВуТадЛате ( "іприС" ); 

Гог ( ѵаг і = 0; і < ІприС.ІепдСЬ; і++ ) { 
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// Обнаружение всех полей с определенным именем 
іі ( іприб[і] .паше == паше ) { 

// Сохранение результатов, чтобы впоследствии их можно было 
// вернуть 

гезиібз .ризЬ.( іприб[і] ); 

// Запоминание количества полей, подвергавшихся 
// установке 
И ( іприб [ і ].сПескеб ) 
гезиібз .пишСЬескеб++; 

} 

} 

// Возвращение набора подходящих полей 
гебигп гезиібз; 

} 

// Ожидание окончания загрузки документа 
иіпбом . опіоаб = іипсбіоп () 

// Получение формы и отслеживание попытки отправки данных, 
босишепб. дебЕІешепбзВуТадЫаше ( "іогш" )[0]. опзиЪтіб = Еипсбіоп (){ 

// Получение проверяемого элемента ввода 
ѵаг еіеш = босишепб. дебЕІешепбВуІб ("аде"); 

// Определение установки флажка в поле аде 
іЕ ( ! сПескВедиігеб ( еіеш ) ) { 

// Отображение сообщения об ошибке и предотвращение отправки 
// данных формы. 

аіегб ( "Обязательное поле не отмечено - " + 

"для использования сайта Вам должно быть свыше 13 лет". ); 
гебигп Іаізе; 

} 

// Получение проверяемого элемента ввода 
ѵаг еіеш = босишепб. дебЕІешепбВуІб ("паше"); 

// Определение ввода в поле паше какого-нибудь текста 
іі ( ! сПескВедиігеб ( еіеш ) ) { 

// Если текст не введен, отображение сообщения об ошибке и 
// предотвращение отправки данных формы, 
аіегб ( "Обязательное поле не заполнено - пожалуйста, 
введите Ваше имя". ); 
гебигп іаізе; 

} 

} ; 

} ; 


Справившись с проверкой заполнения обязательных полей, нужно убедиться в том, что введенные поля 
содержат вполне ожидаемые значения. В следующем разделе мы собираемся рассмотреть, как осуществляется 
проверка содержимого полей. 
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Соответствие шаблону 

Второй составляющей проверки большинства элементов ввода (особенно текстовых полей) является 
определение соответствия шаблону, чтобы проверить, что содержимое полей отвечает определенным 
предположениям. 

При использовании следующей технологии важно понять, что ваши требования к содержимому поля 
должны быть точно и ясно определены. В противном случае не все пользователи смогут понять, что именно от них 
требуется. Неплохим примером подобных требования может послужить запрос дат в определенном формате, 
поскольку даты меняются в зависимости от сложившихся традиций и даже от разных подходов в спецификациях. 

В этом разделе мы собираемся рассмотреть ряд различных технологий, которые могут быть использованы 
для проверки содержимого полей, включая адреса электронной почты, ІЖІ_, телефонные номера и даты. 

Адреса электронной почты 

Поле запроса адреса электронной почты встречается в веб-формах довольно часто, поскольку это 
практически повсеместная форма идентификации и связи. Но провести подлинную проверку на истинность 
электронного адреса (в соответствии со спецификациями на которых он основан) очень трудно. Вместо этого 
можно обеспечить упрощенную проверку, которая сможет работать со всеми встречающимися примерами. В 
листинге 8.4 показан пример проверки поля ввода на наличие в нем адреса электронной почты. 

Листинг 8.4. Проверка на наличие в определенном элементе ввода адреса электронной почты 

// Универсальная функция для проверки, похоже ли содержимое элемента ввода 
// на адрес электронной почты 
бипсбіоп сПескЕтаіІ ( еіет ) { 

// Определение, что в поле что-то введено, и что введенное значение 
// похоже на приемлемый адрес электронной почты 
гебигп еіеш.ѵаіие == 11 | 

/ л [а-г0-9_+ . - ] + \@ ( [а- 20 - 9 -]+\.) + [а-г0-9] {2, 4}$/і.1дез1д ( еіеш.ѵаіие ) ; 

} 

// Получение проверяемого элемента ввода 
ѵаг еіет = боситепС. деСЕІетепСВуІсІ ("етаіі"); 

// Проверка приемлемости содержимого поля 
іі ( ! сПескЕшаіІ( еіет ) ) { 

аіегк( "Поле не содержит адреса электронной почты". ); 

} 

ІІКІ_ 


Во многих формах ввода комментариев (и других сетевых областях) довольно часто запрашивается адрес 
пользовательского веб-сайта в форме ІІК1. Это еще один пример (наряду с адресом электронной почты) когда 
очень трудно полностью задать технические требования по его определению. Но существуют и другие ситуации, в 
которых все, что необходимо на самом деле — это небольшое подмножество полных технических требований. В 
действительности вам нужны лишь веб-адреса, основанные на протоколах НИр или Ыірз (если нужно что-либо 
другое, то изменения внести совсем не трудно). Кроме того, для поля ІІКІ_ типичным началом будет строка ИИр://, 
поэтому вам при проверки формы следует убедиться, что это обстоятельно было принято во внимание. Пример 
проверки приемлемости предоставленных в форме ІЖІ_ показан в листинге 8.5. 
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Листинг 8.5. Проверка на наличие 1Ж1_ в элементе ввода 

// Универсальная функция, предназначенная для проверки наличия ІЖЬ в 

// элементе ввода 

бипсбіоп сПескІЖЬ ( еіеш ) { 

// Определение, что в поле что-то введено, и что введенное значение 
// не является уже введенным по умолчанию текстом ЬССр:// 
гебигп еіеш.ѵаіие == '' || Іеіеш.ѵаіие == МтРСр://' | 

// Определение, что введенное значение похоже на приемлемый ОТІЬ 
/ л Ы;1;р5?:\/\ / ( [а-гО-9-] +\.) + [а-гО-9] {2,4} . *$ / . Севр ( еіеш.ѵаіие ) ; 

} 

// Получение проверяемого элемента ввода 
ѵаг еіеш = сІоситепО . деСЕІетепРВуІсі ("игі") ; 

// Проверка, содержит ли поле приемлемый ІЖЬ 
іі ( ! сЬескІЖЬ ( еіеш ) ) { 

аіегк( "Поле не содержит ШІЬ". ) ; 

} 

Телефонные номера 

Теперь мы рассмотрим два разных поля, содержимое которых различается в зависимости от места вашего 
пребывания: поле телефонных номеров и поле дат. Чтобы упростить задачу, я воспользовался телефонными 
номерами (и датами) центральной части США; приспособить задачу под условия другой страны не представляет 
особой сложности. 

Теперь рассмотрим несколько вариантов поля телефонных номеров. Номера могут быть записаны 
несколькими различными способами, следовательно это нужно учесть (например, 123-456-7890, или (123) 456- 
7890). 


Мы собираемся не только проверить приемлемость телефонного номера, но и привести его к 
определенному формату. Эта задача решается за счет весьма универсального поиска в значении поля 
телефонного номера, направленного на простое обнаружение двух групп по три цифры и одной группы из 
четырех цифр, при этом все дополнительное форматирование, введенное пользователем вокруг этих цифр, 
игнорируется. 

Код этой проверки и приведения значения к определенному формату, показан в листинге 8.6. 

Листинг 8.6. Проверка поля на наличие телефонного номера 


// Универсальная функция, предназначенная для проверки наличия в элементе 
// ввода телефонного номера 
Іипсбіоп сЬескРЬопе( еіеш ) { 

// Проверка на наличие чего-либо похожего на приемлемый телефонный 
// номер 

ѵаг ш = / (\<3{ 3 }) . * ( \сІ{ 3 }) . * (\<3{ 4 }) / . ехес ( еіеш.ѵаіие ); 


// Если похоже что, номер приемлем, приведение его к 
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// определенному желаемому формату: (123) 456-7890 
іб ( ш !== пиіі) 

еіеш.ѵаіие = "(" + т[1] + ") " + т[2] + + т[3]; 

гебигп еіеш.ѵаіие == '' II ш !== пиіі; 

} 

// Получение проверяемого элемента ввода 
ѵаг еіеш = Досшпепб . дебЕІетепбВуІсІ ("рбюпе") ; 

// Проверка наличия в поле приемлемого телефонного номера 
іб ( ! сПескРбюпе ( еіеш ) ) { 

аіегб ( "Поле не содержит телефонного номера". ); 

} 

Дата 


И теперь нам осталось рассмотреть проверку дат. Мы опять обратимся к Центральноамериканскому 
формату, на этот раз для даты (ММ/ДД/ГГГГ). И опять, как в случае с телефонными номерами или другими полями, 
чье заполнение зависит от конкретного региона, регулярное выражение, используемое для проверки, при 
необходимости может быть легко перенастроено под региональные особенности. Простая проверка содержимого 
поля даты может быть произведена с помощью функции, показанной в листинге 8.7. 

Листинг 8.7. Проверка поля на наличие даты 

// Универсальная функция, предназначенная для проверки наличия даты в 

// элементе ввода 

бипсбіоп сПескБабе( еіеш ) { 

// Определение, что в поле что-то введено, и что введенное значение 
// похоже на приемлемую дату в формате ММ/ДД/ГГГГ 

гебигп Іеіеш.ѵаіие | | / А \<5{ 2 }\/\<5{ 2 }\/\<5{ 2,4 } $/. безб (еіеш. ѵаіие) ; 

} 

// Получение проверяемого элемента ввода 
ѵаг еіеш = Досишепб . дебЕІешепбВуІсі ("Дабе") ; 

// Проверка наличия в поле приемлемой даты 
іб ( ! сбескБабе( еіеш ) ) { 

аіегб ( "Поле не содержит даты". ); 

} 

Набор правил 

Теперь, используя различные функции проверки из предыдущего раздела, вы можете создать 
универсальную структуру для работы со всем многообразием проверочных технологий. Важно, чтобы все тесты 
отрабатывались однообразно, с использованием общих названий и общей семантики сообщений об ошибках. 
Полная структура набора правил изложена в листинге 8.8. 

Листинг 8.8. Стандартный набор правил и описательных сообщений об ошибках для построения основного 


механизма проверки 
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ѵаг еггМзд = { 

// Проверка обязательности определенного поля 
гедиігеб: { 

шзд: "Это обязательное поле"., 
безб: Дипсбіоп (оЬ^ , Іоасі) { 

// Обеспечение отсутствия в поле введенного текста 
// и задержки начала работы на загружаемой странице 
// (демонстрация сообщения 'Это обязательное поле' при загрузке 
// страницы будет только раздражать пользователя) 
гебигп оЬ^ . ѵаіие . ІепдбЬ. > 0 | | Іоасі | | ок^ .ѵаіие == 

ок^ . беДаиІбѴаІие; 


} 


Ь 


// Определение наличия в поле приемлемого адреса электронной почты 
ешаіі: { 

шзд: "Введенный адрес неприемлем"., 
безб: Дипсбіоп (ок^) { 

// Определение, что в поле что-то введено, и что введенное 
// значение похоже на адрес электронной почты 
гебигп !оЬд. ѵаіие | 

/ А [а-г0-9_+.-]+\@([а-гО-9-]+\.)+[а-гО-9]{2,4} $/і .безб( 

оЬ^ .ѵаіие ); 


} 




// Определение, что поле содержит телефонный номер, и 
// его автоформатирование в случае положительного результата 
рЬопе: { 

шзд: "Введенный номер неприемлем"., 
безб: Іипсбіоп (ок^) { 

// Определение, что введенное значение похоже 
// на приемлемый телефонный номер 

ѵаг ш = / ( \сі {3 }) . * ( \ сі{ 3 }) . * (\ с!{ 4 }) / . ехес ( оЬ^ . ѵаіие ) ; 

// Если похоже на то, что, номер приемлем, приведение 
// его к определенному желаемому формату: (123) 456-7890 
іі ( ш ) ок^ . ѵаіие = "(" + ш[1]+") " + ш[2]+"-"+ш[3]; 

гебигп !оЬд. ѵаіие || ш; 

} 

Ь 


// Определение, что поле содержит приемлемую дату 
// формата ММ/ДД/ГГГГ 
бабе: { 

шзд: "Дата неприемлема"., 
безб: Дипсбіоп (ок^) { 
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// Определение, что в поле что-то введено, и что введенное 
// значение похоже на приемлемую дату формата ММ/ДД/ГГГГ 
геДигп !оЪ). ѵаіие | | / Л \сІ{ 2 } \/\сІ{ 2 } \/\сІ{ 2,4 } $/. ДезД (оЬ ) . ѵаіие) ; 

} 

Ь 


} ; 


// Определение, что поле содержит приемлемый ІЖЬ 
игі: { 


} 


тзд: "ШІЬ неприемлем"., 

ДезД: ДипсДіоп (оЪ)) { 

// Определение, что в поле введен какой-нибудь текст, и он 
// отличается от уже введенного по умолчанию текста 
// ЬДДр:// 

геДигп !оЪ). ѵаіие || оЪ) .ѵаіие == 'ЬДДр://' | 

// Определение, что введенное значение похоже на 
// приемлемый ІЖЬ 

/ Л ЬДДрз?:\/\/([а-г0-9-]+\.)+[а-20-9]{2,4}.*$/.ДезД( 

оЪ) .ѵаіие ); 


} 


Теперь, используя эту новую структуру набора правил, вы можете создать общие, согласованные средства 
проверки формы и отображения сообщений об ошибках, которые я рассматриваю в следующем разделе. 

Отображение сообщений об ошибках 

Если процесс проверки данных формы не вызывает особых затруднений, то отображения контекстно¬ 
зависимых сообщений об ошибках, способных помочь пользователю более качественно заполнить форму, 
зачастую вызывает определенные трудности. Теперь все созданное в предыдущем разделе мы собираемся 
использовать для создания полноценной системы проверки и отображения сообщений об ошибках. Мы собираемся 
рассмотреть, как осуществляется проверка формы и отображение сообщений об ошибках, и когда все это должно 
происходить, чтобы пользователь все понял наилучшим образом. 

Проверка приемлемости данных 

Используя новую структуру данных можно построить согласованную, расширяемую пару функций, которая 
может быть использована для проверки приемлемости данных формы или отдельного поля, и отображения на 
основе этой проверки контекстно-зависимого сообщения об ошибке. 

Чтобы добиться динамической проверки формы используются две технологии. Первая из них 
предоставляется браузерами и представляет собой часть НТМІ_ ЭОМ-спецификации. Все <1огт>-элементы (в ООМ) 
обладают дополнительным свойством под названием еіетепіз. Это свойство содержит массив всех полей, 
присутствующих в форме, и это значительно облегчает переход по всем имеющимся полям для проверки ошибок 
ввода. 


Вторая важная составляющая заключается во включении во все поля дополнительных классов для 
переключения различных правил проверки. К примеру, наличие класса — гециігесі (обязательное) потребует от 
поля ввода какой-нибудь формы ввода данных. Каждый из классов должен соответствовать тем, которые были 
предоставлены в наборе правил, показанном в листинге 8.8. 
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Теперь, используя эти две технологий, вы можете создать две универсальные функции для проверки 
приемлемости данных всех форм и отдельных полей (и обе эти задачи потребуют полноценного проверочного 
сценария). Эти две функции показаны в листинге 8.9. 

Листинг 8.9. Функции, предназначенные для проверки приемлемости данных, введенных в форму, и 
отображения сообщений об ошибках 

// Функция проверки всех полей внутри формы. 

// Аргумент богш. должен быть ссылкой на элемент формы 

// Аргумент Іоасі должен быть булевой ссылкой на то, что функция проверки 
// запускается не в динамическом режиме, а после загрузке страницы 
бипсбіоп ѵаІісіабеЕогт ( богт, Іоасі ) { 

ѵаг ѵаіісі = бгие; 

// Последовательный перебор всех имеющихся в форме элементов полей 
// богт. еіешепбз — массив всех имеющихся в форме полей 
бог ( ѵаг і = 0; і < богт. еіешепбз . ІепдбП; і++ ) { 

// Скрытие любых сообщений об ошибках, если они были показаны 
ПісІеЕггогз ( богш. еіешепбз [і] ); 

// Проверка содержимого поля на приемлемость 
іб ( ! ѵаіісіабеігіеісі ( богш. еіешепбз [і] , Іоасі ) ) 

ѵаіісі = баізе; 

} 

// Возвращение баізе, если содержимое поля неприемлемо, 

// и бгие, если значение всех полей приемлемо 
гебигп ѵаіісі; 

} 

// Проверка приемлемости содержимого отдельного поля 
бипсбіоп ѵаІісіабеЕіеІсІ ( еіеш, Іоасі ) { 

ѵаг еггогз = []; 

// Последовательный перебор всех имеющихся технологий проверки 

// приемлемости 

бог ( ѵаг паше іп еггМзд ) { 

// Определение, имеет ли поле класс, определенный типом ошибки 
ѵаг ге = пем КедЕхр("( л |\\з)" + паше + "(\\з|$)"); 

// Определение, имеет ли элемент класс, и передан ли он тесту 
// на приемлемость данных 

іб ( ге.безб( еіеш.сІаззИате ) && !еггМзд[пате] .безб ( еіет, Іоасі ) ) 

// Если проверка не удалась, добавление сообщения об ошибке к 
// списку 

еггогз . ризіі ( еггМзд [пате] .тзд ); 


} 
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// Отображение сообщений об ошибке, если таковые имеются 
іі ( еггогз. ІепдбЬ. ) 

зЬоиЕггогз( еіеш, еггогз ) ; 

// Возвращение Таізе, если поле не прошло какую-нибудь процедуру 
// проверки 

гебигп еггогз. ІепдбЬ > 0; 


Возможно, в предыдущем коде вы заметили отсутствие двух функций, относящихся к скрытию и 
отображению сообщений об ошибках, обнаруженных во время проверки. Возможно, эти функции потребуют 
некоторой настройки в соответствии с вашими желаниями по характеру отображения сообщений об ошибках. Но 
для данной конкретной формы я избрал вариант отображения сообщений об ошибках внутри самой формы, сразу 
после отображения каждого из полей. Две функции, предназначенные для выполнения этого замысла, показаны в 
листинге 8.10. 

Листинг 8.10. Функции для отображения и скрытия сообщениях об ошибках, обнаруженных во время 
проверки определенного поля формы 

// Скрытие любых отображаемых на данный момент сообщений об ошибках, 

// обнаруженных во время проверки 
Типсбіоп ЫбеЕггогз ( еіеш ) { 

// Обнаружение следующего за текущим полем элемента 

ѵаг пехб = еіеш.пехбЗіЫіпд; 

// Если следующий элемент иі и имеет класс еггогз 

іТ ( пехб && пехб. посІеЛаше == "ЧЬ" && пехб. сІаззЛаше == "еггогз" ) 

// его следует удалить (в нашем смысле — 'скрыть') 
еіет.рагепббііосіе . гетоѵеСЬіІсІ ( пехб ); 

} 

// Отображение набора сообщений об ошибках для определенного поля 

// внутри формы 

Іипсбіоп зЬомЕггогз( еіеш, еггогз ) { 

// Обнаружение следующего за полем элемента 
ѵаг пехб = еіеш.пехбЗіЫіпд; 

// Если поле не является одним из наших специальных контейнеров 
// для сообщений об ошибке 

іі ( пехб && ( пехб. посІеЛаше != "ЦЬ" | | пехб. сІаззЛаше 

!= "еггогз" ) ) { 

// То такое поле нужно создать 

пехб = сіосишепб . сгеабеЕІешепб ( "иі" ); 

пехб. сІаззЕаше = "еггогз"; 

// а затем вставить его в нужное место в БОМ-структуре 
еІет.рагебЕосІе . іпзегбВебоге ( пехб, еіеш. пехбЗіЫіпд ); 

} 
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// Теперь, имея ссылку на контейнер сообщений об ошибках — 6Ь 
// осуществляем последовательный перебор всех сообщений 
Тог ( ѵаг і = 0; і < еггогз. ІепдбЬ; і++ ) { 

// создаем новый контейнер 1і для каждого из них 
ѵаг 1і = боситепб .сгеабеЕІешепб( "1і" ); 

Іі.іппегНТМЬ = еггогз[і]; 

// и вставляем его в БОМ 
пехб. аррепсІСЫІсІ ( 1і ); 

} 

} 


Теперь, когда работа с кодом ІаѵаЗсгірІ завершена, осталось лишь добавить сообщениям об ошибках 
какое-нибудь дополнительное стилевое оформление, чтобы придать им вполне приглядный вид. Код С55, 
предназначенный для решения этой задачи, показан в листинге 8.11. 

Листинг 8.11. Дополнительный код С55, предназначенный для придания сообщениям об ошибках 
соответствующего вида 

иі. еггогз { 

Іізб-збуіе : попе; 

Ъаскдгоипсі : #РРСЕСЕ; 

расМіпд: Зрх; 

шагдіп: Зрх 0 Зрх 70рх; 

Топб-зіге: 0.9еш; 
місНгЬ: 165рх; 

} 


И наконец, когда все составляющие сложены воедино, можно посмотреть на конечный результат работы 
ІаѵаЗсгірІ и таблицы стилей, показанный на рис. 8.2 (полученный после того, как все это было связано с 
отслеживателями событий, рассматриваемыми в следующем разделе). 

Теперь, когда вы точно знаете, как осуществить проверку приемлемости данных формы (и полей, которые 
в ней содержатся) и отобразить сообщения об ошибках, основанные на любых неудачах, настало время 
определить момент запуска ваших проверочных процедур. Одновременное проведение проверки всех полей не 
всегда является лучшим вариантом, зачастую больше подходит ее постепенное проведение. Мы рассмотрим 
преимущества всех остальных случаев, в которых используется проверка приемлемости в следующем разделе. 
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1-одіп Іггіогтаііоп 

Узетате |"" 

РаззѵѵогсІ [ 


РегзопаІ Іггіогтаііоп 
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ЕтаіІ [сіШз 

N01 а ѵаіій етаіі асісігезз. 


Оаіе [ 


$5 

Ыоі а ѵаіігі сіаіе. 


ѴѴеЬзііе |м«р://55 


Моіа ѵаіігі ІІКІ.. 


РПОПѲ | (123) 123-1233 
ОѵегІЗ? Г 


БиЬтіІ Рогт 


Рис. 8.2. Пример приемлемого и неприемлемого ввода данных в вашей заново стилизованной и 
обработанной сценарием форме 

Когда следует проводить проверку 

Один из наиболее трудных аспектов проведения проверки формы является определение подходящего 
момента для отображения сообщений об ошибках. Для проверки формы (или поля) есть три различных момента 
времени: непосредственно перед отправкой данных формы, после внесения изменений в поле, и после загрузки 
страницы. У каждого из них есть свои преимущества и недостатки, требующие отдельного рассмотрения. 
Использование разработанных в предыдущем разделе функций упрощает и облегчает осмысление этого процесса. 

Проверка, предшествующая отправке данных формы 

Наибольшее распространение получила проверка, осуществляемая непосредственно перед отправкой 
формы, поскольку она лучше всего вписывается в стандартные проверочные технологии. Чтобы отследить момент, 
наступающий непосредственно перед передачей формы, нужно осуществить привязку обработчика события, 
который будет ожидать завершения заполнения формы и щелчка на кнопке отправки — БиЬтіі (или нажатия 
клавиши Епіег). При этом не ставится обязательное условие, что во все поля пользователь уже ввел какие-нибудь 
значения, но раз форма направлена на отправку, она проходит проверку на соответствие всем правилам 
определенного набора. Если какое-то из полей не соответствует какому-нибудь правилу, форма не будет 
отправлена, и пользователю придется разбираться в предъявленных ему сообщениях об ошибках (что делается за 
счет подавления исходных действий обработчика события 5иЬті1:). Необходимы для реализации этой технологии 
код показан в листинге 8.12. 

Листинг 8.12. Ожидание события отправки для запуска функции проверки формы 


Еипсбіоп мабсЬЕогт( богт ) { 
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// Отслеживание события отправки формы 
асМЕѵепб ( богш, 'зиЪтіб', бипсбіоп(){ 

// Обеспечение прохождения формой проверки приемлемости данных 
гебигп ѵаІісІабеЕогт ( богш. ); 

}) ; 

} 

// Обнаружение первой формы на странице 

ѵаг богш. = босшпепб. дебЕІетепбзВуТадЛате ( "богш" )[0]; 

// и отслеживание ее события отправки для того, чтобы подвергнуть проверке 
мабсЬЕогт( богш ); 

Проверка после внесения в поле изменений 

Другая технология, применяемая для проверки приемлемости данных формы, заключается в отслеживании 
внутри отдельных полей формы. Для этого можно воспользоваться событием нажатия клавиши — кеургезз, но это 
приведет к нежелательным результатам. Постоянное отслеживание ошибки при каждом нажатии клавиши в 
пределах поля будет сбивать пользователей с толку. Они (к примеру) могут приступить к вводу адреса своей 
электронной почты, и увидят сообщение об ошибке, в котором утверждается, что их адрес некорректен. Но это 
будет неверно, поскольку они еще не завершили ввод данных в поле. В общем, нам такая технология не 
подойдет, поскольку пользователь будет от нее не в восторге. 

Второй способ отслеживания изменений в поле заключается в ожидании, пока пользователь его не 
покинет (в надежде на то, что он ввел всю необходимую информацию). Проведение такой проверки 
воспринимается пользователем намного легче, поскольку он получает возможность ввести всю желаемую 
информацию, и ему по прежнему выдается оперативное сообщение об ошибке, вызванной неприемлемостью 
данных. 

Пример реализации этой технологии показан в листинге 8.13. 

Листинг 8.13. Отслеживание изменений в поле перед запуском любых проверочных функций 

бипсбіоп мабсЬЕіеІсІз ( богш. ) { 

// Последовательный перебор всех элементов полей формы 
бог ( ѵаг і = 0; і < богш. еіешепбз . ІепдбЬ; і++ ) { 

// и прикрепление к ним обработчика события ' сЬапде ' (отслеживающего 
// потерю фокуса элементом ввода) 

асМЕѵепб ( богш. еіешепбз[і] , 'сЬапде', бипсбіоп(){ 

// Как только фокус утрачен, перепроверка поля 
гебигп ѵаІісІабеЕіеІсІ ( бЬіз ); 

}) ; 

} 

} 

// Обнаружение первой формы на странице 

ѵаг богш = босишепб. дебЕІешепбзВуТадЛате ( "богш" )[0]; 
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// Отслеживание изменений во всех полях формы 
мабсііЕіеІсІз ( богт ) ; 

Проверка после загрузки страницы 

Проверка формы после загрузки страницы не столь востребована, как предыдущие две технологии, но 
если вы хотите охватить и особые случаи, ее тоже нужно включить в свой арсенал. Если пользователь вводит в 
форму информацию, а затем повторно загружает окно браузера (или если браузер или само приложение заранее 
заполняет форму пользовательской информацией), существует вероятность, что ошибка будет допущена в 
информации, используемой для предварительного заполнения. Эта технология разработана для запуска проверки 
приемлемости данных формы при каждой загрузке страницы для оценки качества уже введенных данных. 

При этом пользователь получает возможность немедленной работы над ошибками, не дожидаясь проверки 
данных, запущенной по событию их отправки. 

Код, необходимый для проверки приемлемости данных формы после загрузки страницы, показан в 
листинге 8.14. 

Листинг 8.14. Осуществление проверки формы после загрузки страницы 

асІсІЕѵепб ( иіпсіои, "Іоасі", бипсбіоп() { 

// Обнаружение всех форм на странице 

ѵаг богтз = босшпепб. дебЕІешепбзВуТадЛаше ("богт"); 


// Последовательный перебор всех форм на странице 
бог ( ѵаг і = 0; і < богтз. ІепдбЬ; і++ ) { 

// Проверка каждой из форм, установив аргумент 'Іоасі' 

// в бгие, чтобы остановить появление определенных, совершенно 
// ненужных ошибок 
ѵаІісІабеЕогт ( богтз [і], бгие ); 

} 

}) ; 


Освоив всевозможные формы проверки, способы отображения сообщений об ошибках, и даже рассмотрев 
вопрос, когда следует проводить проверку формы, мы подошли к достойному финишу: полной проверке формы на 
стороне клиента. После того, как мы справились с этой задачей, можно приступать к исследованию двух 
дополнительные технологии, повышающих качество работы с формами и с определенными типами ее полей. 

Повышение качества работы с формами 

Учитывая, что формы относятся к наиболее часто используемым элементам веб-страниц, повышение 
качества работы с ними принесет пользователю несомненные выгоды. В этом разделе я собираюсь рассмотреть 
две разные, довольно широко распространенные технологии, которые довольно часто используются для 
повышения качества работы с формами. 

Кроме этого вам представится еще одна возможность воспользоваться библиотекой ІаѵаЗсгірі для 
упрощения трудоемких ООМ-перемещений и изменений, необходимых для выполнения намеченной нами задачи. 
Для двух представленных здесь технологий я выбрал использование ІаѵаЗсгірі-библиотеки )(2иегу 
(біірѴ^'диегу.сот/), которая, в частности, хорошо подходит для осуществления ООМ-перемещений и изменений. 


Накладные надписи 
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Первое из рассматриваемых усовершенствований, касается установочных (накладных) надписей поверх 
связанных с ними полей, и их скрытия, как только соответствующее им поле получает фокус. Эта технология 
имеет двойное предназначение. Она абсолютно точно объясняет пользователю, что предполагается вводить в 
конкретное поле (поскольку то, что предполагается в него вводить написано поверх самого поля). И к тому же она 
позволяет уменьшить общее пространство, необходимое для поля и соответствующей ему надписи. 

В нашей исходной форме мы добавим эти две накладные надписи к полям имени пользователя — изегпате 
и пароля — раззѵѵопф чтобы получить результат, показанный на рис. 8.3. 

І-одіп Іггіогтаііоп 

|іізетате | Раззѵѵогй 


РегзопаІ ІпТогтаІіоп 



$иЬтіі Рогт 


Рис. 8.3. Использование накладных надписей для полей имени пользователя и пароля 

Код ІаѵаЗсгірі, необходимый для получения этого специфического эффекта, будет сравнительно 
непростым. Для гладкой работы в него потребуется включить множество мелких подробностей. Рассмотрим две 
особенности, необходимые для получения конечного результата. 

Во-первых, чтобы позиционировать надписи поверх самих элементов ввода, сначала нужно поместить и 
надпись, и элемент ввода в сЛѵ-контейнер. Этот біѵ используется таким образом, чтобы можно было абсолютно 
позиционировать надпись поверх поля. 

Во-вторых, это нужно сделать так, чтобы когда поле получало или утрачивало фокус, надпись 
соответственно скрывалась (или отображалась). Кроме этого, когда пользователь покидает поле, нужно 
проверить, имеет ли оно какое-нибудь значение, и если имеет, больше не показывать надпись. 

И наконец, нужно обеспечить, чтобы надпись не появлялась, если значение помещается в поле по 
умолчанию (иначе у вас получится полная мешанина). 

Памятуя обо всем этом, давайте взглянем на код, необходимый для получения накладных надписей внутри 
формы, который представлен в листинге 8.15. 

Листинг 8.15. Накладные надписи, появляющиеся поверх полей, реализованные с помощью ІаѵаЗсгірІ- 
библиотеки )(5иегу 

// Обнаружение всех элементов ввода, следующих за надписями, имеющими 
// класс Ьоѵег 
$( "ІаЪеІ . Ьоѵег+іприб" ) 
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// Заключение элемента ввода в сііѵ (имеющий класс Ноѵег-мгар) , 
// чтобы получить следующий НТМЬ: 

// <сііѵ с1аз5= ' Ьоѵег-мгар ' Хіприб буре^'бехб" /></сііѵ> 

. мгар ( "<сііѵ с1азз= ' Ьоѵег-мгар ' ></ біѵ>" ) 

// Скрытие надписи при каждом получении элементом ввода фокуса 
// (либо за счет щелчка, либо за счет клавиатурных манипуляций) 
. іосиз ( іипсбіоп (){ 

$ (біііз ) . ргеѵ () .Нібе() ; 

}) 

// Повторный показ надписи при выходе пользователя за пределы 
// элемента ввода (без ввода в него какого-либо текста). 

. Ыиг (іипсбіоп () { 

іі ( ! біііз. ѵаіие ) $(бНіз).ргеѵ().зПом() 

}) 

// Индивидуальный перебор всех элементов ввода 
.еасП(іипсбіоп(){ 

// Внедрение надписи в <біѵ с1азз= ' Ьоѵег-мгар ' ></сііѵ> 

$(біііз).Ъеіоге( $ (біііз) . рагепб () . ргеѵ () ); 

// Обеспечение автоматического скрытия надписи, если 
// значение уже введено 

іі ( СНіз.ѵаІие ) $ (ігіііз) . ргеѵ () . Пібе () ; 


Но для достижения желаемого результата одного ІаѵаЗсгірІ: недостаточно. Все-таки для того, чтобы 

надписи и поля встали на правильные позиции, нужно обязательно включить дополнительные стили С55. 

Необходимый для этого код показан в листинге 8.16. 

Листинг 8.16. Стили С55, необходимые, чтобы заставить надписи накладываться на связанные с ними поля 

сііѵ . Ноѵег-мгар { 

розібіоп: геіабіѵе; 
бізріау: іпііпе; 

} 

біѵ.Ьоѵег-мгар іприб . іпѵаіісі { 

Ъогбег: 2рх зоіісі геб; 

} 

біѵ.Поѵег-мгар иі.еггогз { 
бізріау: попе; 

} 

біѵ.Ноѵег-мгар ІаЬеІ.Поѵег { 
розібіоп: аЬзоІибе; 



бор: -0.7еш; 
Іебб: 5рх; 
соіог: #666; 
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} 


Вот так, без особого труда, мы создали очень полезное усовершенствование, повышающее качество 
работы с формой. Использование этой специализированной технологии позволяет убить сразу двух зайцев: 
сэкономить место на экране, и сохранить необходимые для пользователя указания. 

Пометка обязательных полей 

Вторая технология, которую мы собираемся рассмотреть, касается пометки обязательных полей каким- 
нибудь знаком. Большинство веб-разработчиков выбрали для пометки обязательных полей на своих веб-сайтах 
красную звездочку. Но дополнительная разметка, необходимая для включения этих звездочек, выходит за рамки 
обычной семантики, и может стать обескураживающим моментом. Но для нас это станет лишь прекрасной 
возможностью воспользоваться для добавления знака ІаѵаЗсгірі. Пример этой технологии показан на рис. 8.4. 

1-одіп Іггіогтаііоп 

|іізегпате | Развитого 

РегзопаІ ІпРогтаІіоп 


Мате * 

Г" 

ЕтаіІ * 

г - 

Оаіе * 

г - 

ѴѴеЬзііе 

г - 

РМопе 

г - 

Оѵег 13? 

г 


$иЬтіі Рогт 


Рис. 8.4. Результат добавления контекстно-зависимых звездочек к обязательным полям формы 

Одним из аспектов добавления этих знаков к надписям обязательных полей заключается в дополнении 
формы специальным вспомогательным текстом, который служит пояснением для пользователей. Использование 
атрибута ііііе позволит предоставить пользователям сообщение, поясняющее значение красной звездочки (на тот 
случай, если они с ним не знакомы). В общем, реализация этого усовершенствования не отличается сложностью, 
и показана в листинге 8.17. 

Листинг 8.17. Добавление контекстно-зависимых звездочек (*) и пояснительных сообщений к 
обязательным полям формы с использованием ІаѵаБсгірі-библиотеки іС^иегу 

// обнаружение всех полей ввода, помеченных обязательными (гериігесі) 

$ ( "іприб . гериігесі" ) 

// затем обнаружение предшествующей им надписи 
.ргеѵ("ІаЪеІ") 


// Изменение курсора при прохождении над надписью на более 
// полезный элемент 
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.С55("сигзог", "Ьеір") 

// Обеспечение появления поясняющей надписи для звездочки при 
// прохождении над ней указателя мыши 
. бібіе ( еггМзд. гедиігеб ) 

//И наконец, добавление звездочки (*) к надписи, чтобы обозначить 
// обязательное поле 

. аррепсЦ" <зрап с1азз= ' гедиігесі ' >*</зрап>") ; 

Для получения стилевого оформления, необходимо добавить к значку красную расцветку (см. 
листинг 8.18). 

Листинг 8.18. Дополнительный код СБ5 для стилевого оформления звездочки (*) 

ІаЪеІ зрап. гедиігесі { 
соіог: геб; 

} 


Добавление пометок и накладных надписей — это существенное повышение качества работы с формами, 
которое можно получить за счет использования ІаѵаБсгірі в ненавязчивой и полезной форме. Я уверен, что в 
своих приложениях вы всегда найдете массу возможностей для усовершенствования работы с формами и полями 
за счет использования простого кода ІаѵаБсгірі. 

Выводы 

Показав вам сначала ряд аспектов, затрудняющих использование форм в веб-приложених, я надеюсь, что 
сумел поднять ваше настроение научив, как с помощью простого дополнительного кода на ІаѵаБсгірі существенно 
улучшить общее качество работы с формами. Пример всего, что удалось достичь в этой главе, показан на рис. 8.5. 



І_одіп Іггіогтаііоп 

Іізетате | Раззѵѵогсі 
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РегзопаІ ІпГогтаІіоп 

Nате * | сІГзМз 


ЕтаіІ * [Н?мГ 


Ыо( а ѵаіісі етаіі асісігезз. 


Оаіе * 

N01 а ѵаіісі йаіе. 


ѴѴеЬзііе |ь«р ://55 


N01 а ѵаіісі ІІКІ.. 


РПопе | (123) 123-1233 
Оѵег13? Г 


$иЬті( Рогт 


Рис. 8.5. Законченный вид формы, усовершенствованной за счет ^ѵаЗсгірІ: 

Мы начали главу с рассмотрения, как наиболее точно провести проверку приемлемости данных на стороне 
клиента, оставив при этом у пользователя наилучшие впечатления от ее работы. Этого удалось добиться за счет 
создания набора проверочных правил, проверки приемлемости данных в полях формы в самые подходящие для 
этого моменты, и отображения полезных для пользователя сообщений об ошибках. Вдобавок мы рассмотрели две 
технологии, повышающие качество работы пользователя с формой за счет накладных надписей и пометки 
обязательных полей. 

Я надеюсь, что все вместе взятые представленные здесь технологии, могут быть широко задействованы 
вами в тех формах, которые вам еще предстоит разработать. 
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Глава 9 Создание галерей изображений 

Работа с ЭОМ, перемещение по элементам и динамическое использование С55 — все это направлено на 
то, что бы создать у конечного пользователя положительное впечатление о веб-сайте о простоте и легкости 
управления его работой. Галерея изображений (позволяющая осуществлять из просмотр и перебор) является 
одним из тех приложений, которые получают от применения этих технологий явное преимущество. Повысившееся 
качество браузеров позволяет использовать динамические сценарии и утилиты. В последнее время эти 
усовершенствования привели к созданию ряда высококачественных галерей изображений. 

В этой главе мы рассмотрим две такие галереи, и посмотрим, в чем заключается их конкретная 
уникальность, а затем создадим свою собственную галерею, используя динамический, ненавязчивый код 
ІаѵаБсгірі. При этом будет рассмотрен ряд вопросов, касающихся подробностей конструкции и реализации 
галереи. Конечным результатом станет эффективно работающий сценарий создания галереи изображений, 
который может без труда размещен на любом веб-сайте. Кроме этого у нас появится отличная возможность для 
применения функций, разработанных в пятой и седьмой главах, в которых для создания простого и качественного 
кода будет использована совместная работа ЭОМ, ІаѵаБсгірі и С55. 

Примеры галерей 

Имеется несколько превосходных, современных сценариев галерей изображений, оставляющих яркое 
впечатление, удобных в работе и полностью отвечающих принципам ненавязчивости. Два сценария, которые мы 
собираемся рассмотреть подробнее, обладают очень похожими визуальными эффектами, но используют в основе 
своего кода разные библиотеки. 

Работу галерей можно кратко представить следующим образом: 

• Когда на одном из изображений галереи происходит щелчок мышью, вместо перенаправления 

пользователя на просмотр этого изображения, происходит его наложение на экран. 

• Когда отображается наложенное на экран изображение, поверх страницы накладывается прозрачный 

серый фильтр (снижая яркость всего, что под него попало). 

• Отображаемое в данный момент изображение каким-либо образом помечается в галерее изображений. 

• Существует какой-нибудь способ перехода по галерее от одного изображения к другому. 

В этом разделе мы собираемся рассмотреть галереи, которые создаются двумя очень известными 
библиотеками — ЫдИШох и ТНіскВох. 

ЫдНІЬох 

ЫдІііЬох является первой из ООМ-галерей «нового стиля». Ее выпуск подтолкнул на создание ряда других 
галерей подобного стиля, положенных в основу материалов этой главы. 

Эта галерея разрабатывалась с нуля (без использования в качестве основы какой-то конкретной 
ІаѵаБсгірі-библиотеки). Но с тех пор она была приспособлена к использованию различных библиотек (что 
привело к сокращению общего объема ее кода). Дополнительная информация об этом сценарии может быть 
найдена по адресам Ы:1:р ://ѵѵѵѵѵѵ.НіисІс1Іе1:одеІ:Ніег.сот/ргодес1:5/Іід Ы:Ьох/ и МІрѴ/рагіісІеІхее.сот/ ГеаІигез/ІідІ'ііЬох- 
допе-ѵѵіісі/, где представлены сведения о ЫдІііЬох, использующей ІаѵаБсгірІ-библиотеку Ргоіоіуре. 

На рис. 9.1 показан пример копии экрана галереи ЫдбІЬох в действии, с ее уникальным наложением 
прозрачного затемнения и размещенным по центру изображением. 
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Рис. 9.1. ЫдМЬох отображает отдельное изображение, принадлежащее галереи 

ЫдИІЬох всецело работает в ненавязчивой манере. Чтобы воспользоваться этой библиотекой нужно просто 
включить сценарий в заголовок вашего НТМЬ-файла и модифицировать НТМІ_ изображения, которые вы хотите 
отображать с ее использованием, и тогда код сценария сделает все остальное: 

<а Ьгеі="ішаде5/ітаде-1 .)рд" геі="1ідЫ:Ьох" бі'Ые="сопроводительная 

надпись">фото №1</а> 

К сожалению, ненавязчивая природа кода не столь совершенна, как могла бы быть (вместо того, чтобы 
отслеживать готовность ЭОМ, библиотека ожидает загрузки всех изображений). Тем не менее, задействованные 
ООМ-сценарии (см. листинг 9.1) совершенно рациональны и пригодны к использованию. 

Листинг 9-1. Обнаружение всех элементов ссылки (апсііог) и их преобразование для правильного отображения 

// Обнаружение на странице всех тегов апсЬог 
ѵаг апсНогз = босшпепб. дебЕІешепбзВуТадЛаше ("а"); 

// Последовательный перебор всех тегов апсЬог 
Тог ( ѵаг і=0; і < апсЬогз. ІепдбЬ; і++ ) { 

ѵаг апсЬог = апсЬогз[і]; 


// Проверка на принадлежность ссылки к "ІідПбЬох 
іТ ( апсПог.ПгеТ && апсПог.геІ == "ІідПбЬох" ) { 
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// Обеспечение отображения ЬідЬбЬох по щелчку 
апсЬог. опсііск = Типскіоп () { 

зЬомЬідЬбЬох(кЬіз) ; 
гекигп Таізе; 

} ; 

} 

} 


Под влиянием отзывов новых пользователей ЫдЫіЬох постепенно развивалась, в нее добавлялись новые 
свойства, к примеру, переходы с помощью клавиатуры и анимационные эффекты. Тем не менее в своем самом 
простом варианте, ЫдІііЬох вдохновляет на создание вашей собственной подобное галереи изображений. 

ТЫскВох 

Вторая галерея изображений, которую мне захотелось вам показать — это ТЫскВох, созданная Коди 
Линдли (Сосіу ЫпсІІеу), в которой используется ^ѵаЗсгірІі-библиотека )С2иегу. Эта реализация очень похожа на 
ЫдЫіЬох, но значительно меньше по размерам и поддерживает с использованием А)ах загрузку внешних НТМЬ 
файлов. Дополнительные сведения об этой библиотеке могут быть найдены на его веб-сайте 
(бир://согіуІіпЫеу.сот/Эаѵа5сгір1:/257/1:ЫскЬох-опе-Ьох-(:о-гиІе-(:Іпет-аІІ), могут быть найдены и примеры, 
демонстрирующее ее в действии (МНр:// )диегу.сот/с1ето/1:ЫскЬох/). 

Как видно на копии экрана (см. рис. 9.2), результат отображения картинок с помощью ТЫскВох очень 
похож на результаты работы ЫдІііЬох. Как и в УдЫіЬох, в ТЫскВох используются ненавязчивые средства ее 
загрузки и выполнения. После простого включения сценария в заголовок страницы, он пройдет по всей ЭОМ- 
структуре и отыщет все ссылки, имеющие класс іЫскЬох, подобные показанной в следующем коде: 

<а Ь^еТ="а^ ахЬодіп . Ьбш?Ьеід1тб=100&\л7Ісіб1т=250" с1азз="бЬіскЬох">ТЬіскВох 1одіп</а> 
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Рис. 9.2. ТМскВох отображает отдельное изображение поверх всей остальной страницы 

В листинге 9.2 показан код, который ТИіскВох использует для динамического и ненавязчивого применения 
своих функциональных возможностей, как только ООМ будет готов к работе (что произойдет до того, как будут 
загружены все имеющиеся на странице изображения, создавая у пользователей более благоприятное 
впечатление). 

Листинг 9.2. Применение функциональных возможностей ко всем элементам апсбог, имеющим класс 
"іЫскЬох" 

// Обнаружение всех элементов ккіскЪох, когда БОМ будет готов к работе 
$(босшпепк).геабу (кипскіоп (){ 

// добавление кЫскЪох к элементам Ьгек, имеющим класс .бЫскЬох 
$ ("а. ккіскЪох" ) . сііск ( кипскіоп () { 

// Определение надписи для ккіскЪох 

ѵаг к = ккіз . кікіе | | кЫз.паше | | кЫз.Ьгеб | | пиіі; 

// Отображение кЫскЬох 
ТВ зЬом (к, кЫз . Ьгек) ; 

// Удаление фокуса со ссылки 
кЬіз . Ыиг () ; 


// Обеспечение блокировки обычной работы ссылки 
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гебигп баізе; 

}) ; 

}) ; 


Благодаря количеству дополнительных возможностей, включенных в ТЫскВох, а также более компактному 
коду, эта библиотека несомненно предпочтительнее идШэох. 

Далее мы собираемся рассмотреть, как создать свой собственный клон галереи, с учетом всех 
хитросплетений, необходимых для того, чтобы выполнить эту работу вполне корректно. 

Создание галереи 

Первым шагом к созданию галереи изображений должен стать набор изображений, по которым можно 
будет осуществлять переходы. Я собираюсь выдвинуть предположение, что на странице может быть любое 
количество галерей, и в каждой галерее может быть любое количество изображений. Кроме этого очень важно, 
чтобы перед любым применением вашего ІаѵаЗсгірІ:, изображения были отображены в понятной и семантически 
непротиворечивой манере. Это поможет обеспечить пользователям, имеющим выключенный ЭаѵаЗсгірІ; (или 
имеющим ущербную поддержку С55) получать тем не менее вполне приемлемое впечатление от страницы. 

Основной НТМБ-код, который мы собираемся использовать для нашей галереи, показан в листинге 9.3. 

Листинг 9.3. Основной НТМЬ-код страницы, содержащей нашу галерею изображений 

<! БОСТУРЕ Ьбті РЛВЫС "-//ИЗО//БТБ ХНТМЬ 1.0 Тгапзібіопа1//ЕЛ" 

"Ьббр : / /тт . мЗ . огд/ТК/ хЬбшІІ /БТИ/ хЬбтІІ-бгапзі'ЬіопаІ . СІ±СІ"> 

<Ы;т1> 

<Ьеа<3> 

<бі1;1е>Произвольные изображения кошек</бі1;1е> 

</ЬеасІ> 

<ЪосІу> 

<Ы>Произвольные изображения кошек</Ы> 

<р>Ьогеш ірзит боіог . . . </р> 

<! -- 

Наша галерея, которая должна содержать <иі>, сіазз которого 
равен "даііегу", а бібіе связан с этой галереей. 

-> 

<и1 сіазз="да11егу" бібіе="Произвольные изображения кошек"> 

<! -- 

Каждое изображение галереи должно быть заключено в элементы 
<1і>, и иметь ссылку, указывающую на текущее место изображения. 

Если изображение большое, в него к тому же нужно включить сіазз 
"баіі" . 

--> 

<1і><а Ьгеб="ішаде1.^рд"><ішд згс="ішаде1. орд" 
а1б="Спящий жирный кот "/></а></1і> 

<1іХа Ьгеб="ішаде2 . ^рд"Xішд згс="ішаде2 . ^рд" 
а1б="На одной кровати"/х/а></1і> 
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<1І с1азз="ба11"Ха Ьгеі="ішадеЗ . зрд"хітд згс="ітадеЗ.^рд" 
а1б="3а окошком "/></а></1і> 

<1І с1азз="ба11"Ха Ьгеі="ішаде4 . ^рд"><ішд згс="ітаде4.^рд" 
а11с="На солнышке"/х/а></1і> 

<1іХа Ьге Е="ішаде5 орд"Хітд згс="ітаде5.^рд" 
а1б="Удобно устроился"/></аХ/1і> 


</и1> 

<р>Ьогеш ірзит боіог . . . </р> 

</ЪосІу> 

</Ъбт1> 

Затем нужно применить к изображениям дополнительное стилевое оформление, чтобы получить более 
приглядный вид и более наглядное перемещение. Соответствующий код С55 показан в листинге 9.4 9-4. 

Листинг 9.4. С55 для соответствующего стилевого оформления страницы 


Ьосіу { 

іопб-іатііу : Агіаі; 
бопб-зіг: 14рх; 

} 

/* Включает красивое обрамление вокруг галереи изображений. */ 
иі.даііегу { 

Іізб-збуіе: попе; 
расісііпд: 5рх; 

Ьаскдгоипб: #ЕЕЕ; 
оѵегііом: аибо; 

Ъогбег: Ірх зоіісі #ААА; 
тагдіп-бор: Орх; 

} 

/* Создает вокруг каждого изображения прямоугольник стандартной ширины и высоты. */ 
иі.даііегу 1і { 
біоаб: Іебб; 
тагдіп: брх; 
місібЬ: ІІОрх; 

Ьеідііб: ІІОрх; 

Ьаскдгоипб: #ЕЕЕ; 

Ьогбег: 2рх зоіісі #ААА; 

} 

/* Изображения горизонтального формата шириной ЮОрх */ 
иі.даііегу ішд { 
місНск: ЮОрх; 
шагдіп: 5рх; 

Ъогбег: Орх; 
тагдіп-бор: 17рх; 
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} 

/* Изображения вертикального формата высотой ІООрх */ 
иі.даііегу Іі.баіі ішд { 

ЬеідЫ;: ІООрх; 
місНгЬ: аибо; 
шагдіп-бор: 5рх; 
шагдіп-іебб: 17рх; 

} 


Получившийся результат работы базового НТМІ_ и С55 показан на рис. 9.3. Теперь, после установки на 
странице базового НТМІ_, мы готовы приступить к сведению воедино компонентов, необходимых для создания 
красивой, приводимой в действие кодом ЗаѵаЗспрІ галереи изображений. 


Іисіиз. та5за ѵііае ріасегаі бтопсиз, педие таигів ІоЬоПіз етт, к) иііатсогрег биі пипс е( епіт. Іліедег ІаисіЬиз ггіопсиз 
еііі ѴезЬЬиІит ці апіе Мобх а зет Ѵіѵатиз асситзап 

Маесепаз ЫЬепбит іеііиз а( ап№. Маесепаз рЬагеіга ѵоіиіраі таигіз. Ѵіѵатиз ѵиіриіаіе РеІІепІездие пес ребе 
Реііепіездие аіідиеі. (еііиз пес ріасегаі ЫЬепбит, іасиз аидие таПіз Іеііиз. іб іасиііз епіт аидие ас заріеп Маесепаз 
соттобо апіе диіз Іеііиз. РгіазеІІиз Іетрог. тазза поп таіезиасіа сигзиз, Іобог іизіо тоіііз біат. еде! задіійз боіог ірзит 
аі ѵеііі. СигаЫІиг аі ресіе ей тадпа зоіііаіобіп асситзап Оиіз диіз ѵеііі пес іизіо сопбітепіит аіідиеі Маигіз сіідпіззіт ті. 
РгіазеІІиз поп таигіз. Аіідиат задіПіз Ыапбіі тадпа 

ЕІіат диат. Зесі пізі Маесепаз ѵіѵегга реііепіездие апіе. Ризсе ѵиіриіаіе рогіа теіиз. Маесепаз Іигріз ита. роПа ѵііае. 
Іетрог ѵеі. сІаріЬиз ѵезІіЬиІит. Іеііз. Реііепіездие зіі атеі пізі. СигаЫІигЫапсііі 5ес) іп пізі еі педие сопсіітеліит Іасіпіа. 
МогЬІ агси сіиі. сіідпіззіт іп. сопзесіеіиег диіз. дгаѵісіа ас. (еііз. Ргоіп Іасіпіа аіідиеі аидие Маигіз пес осііо. ѴезйЬиІит ей 
огсі пес Іідиіа сопзедиаі гПопсиз РгіазеІІиз пипс пипс, ѵиіриіаіе розиеге. зетрег іп. сигзиз пес. огсі. СигаЫІиг зет іизіо, 
иііатсогрег ѵііае. асіірізсіпд іп. таіезиасіа ѵеі. еііі Маесепаз еіеііепсі. )из!о зесі отаге сопзедиаі. зет ірзит реііепіездие 
Іигріз. іп гиШіт огсі педие зесі тазза ѴезІіЬиІит Іаогееі сіиі еде) агси Оиіздие іп Іогет. МогЬі диіз Іасиз Маесепаз 
попитту теіиз аисіог пипс. 



богет ірзит сіоіог зіі атеі. сопзесіеіиег асіірізсіпд еііі ЫиІІат аі зет. ІЛ иііпсез. боіог зіі атеі ргіагеіга ргаііит. Іео теіиз 
асситзап ита. ей иіігісез ригиз аидие аі Іідиіа. Мат дгаѵісіа. Маигіз педие Іасиз. ѵеЫсиІа еі Ьепсігегіі пес, зетрег диіз. 
піЬгі. ІМиІІа іааіізі. СигаЫІиг ісі апіе. Ргоіп Іеііз ірзит. соттосіо поп. Ьепсігегіі еі, иііпсез іп. егоз. ІЧиІІа Ьпсісіипі ѵиіриіаіе 
іеііз. МогЬі сопѵаіііз ІіЬего зесі егаі. ЕІіат Іесіиз ресіе, сіісіит еі гцігит ісі, соттобо пес. аидие. ѴезІіЬиІит тазза Ризсе 
пес Іеііз Ѵіѵатиз сопзесіеіиег еіетепіит еііі. 

ЕІіат таПіз едезіаз Іеііз. Ргоіп зесі тадпа аі ого аіідиеі таПіз. Ѵіѵатиз Іідиіа теіиз. іпіегбит диіз. ѵіѵегга пес. ѵеЬісиІа 
ѵііае, таигіз. Реііепіездие ѵепепаііз ребе ѵеі аидие Аіідиат ІгіпдіІІа пипс едеі егоз Реііепіездие едеі ірзит. МогЬі 
аидие. РгаезепІ зіі атеі ірзит. III ѵііае вет еібіат таійз ітрегбіеі РгіазеІІиз а ребе Зизрепбіззе роіепіі Маесепаз іп 
заріеп зіі атеі ита иііпсез бідпіззіт. Оьіз аіідиеі ІаисіЬиз обіо Мипс а Іигріз ѵііае зет роба ѵіѵегга ѴезІіЬиІит оопѵаіііз 
бідпіззіт пізі Ризсе епіт МогЬі диат РгаезепІ Юбог Зизрепбіззе ей боіог Ш1етри5 Юбогіп биі 

Аепеап іизіо Іпіедег едезіаз рЬагеіга диат. МиІІа ІаисіЬиз, ті ѵеі тоіііз (етриз. Іобог ІіЬего ІгіпдіІІа обіо. ас іасиііз егоз 
диат едеі Іогет. Реііепіездие пес епіт. Сгаз роба, йиіз отаге ІіЬего ѵеі гізиз. Іп Ьас ЬаЬіІаззе ріаіеа бісіитзі. Оиіздие 
Іисіив. тазва ѵііае ріасегаі бюпсиз. педие таигіз ІоЬобіз епіт. іб иііатсогрег биі пипс еі епіт. Іпіедег ІаисіЬиз ггіопсиз 
еііі ѴезІіЬиІит ці апіе Мобх а зет Ѵіѵатиз асситзап 

Маесепаз ЫЬепбит Іеііиз аі апіе. Маесепаз рЬагеіга ѵоіиіраі таигіз. Ѵіѵатиз ѵиіриіаіе. Реііепіездие пес ребе. 
Реііепіездие аіідиеі. Іеііиз пес ріасегаі ЫЬепбит, Іасиз аидие таПіз Іеііиз. іб іасиііз епіт аидие ас заріеп Маесепаз 
соттобо апіе диіз Іеііиз. РЬаэеІІиз Іетрог. тазза поп таіезиаба сигзиз. Іобог іизіо тоіііз біат. едеі задіПіз боіог ірзит 
аі ѵеііі. СигаЫІиг аі ребе ей тадпа зоііісііибіп асситзап Оиіз диіз ѵеііі пес іизіо сопбітепіцт аіідиеі. Маигіз бідпіззіт ті. 
РгіазеІІиз поп таигіз. Аіідиат задіПіз ЫапбіІ тадпа 


Рис. 9.3. Веб-страница, содержащая изображения с простым стилевым оформлением 

Ненавязчивая загрузка 

Одной из сторон, которой согласно нашим требованиям должна обладать галерея изображений, должна 
быть ненавязчивая работа сценария. Нам не хотелось бы заставлять пользователей сценария включать какой- 
нибудь лишний (и не отвечающей семантике) НТМЬ на их веб-страницы, только ради того, чтобы придать им 
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более приглядный вид. Поэтому мы собираемся начать со вставки некоторого количества НТМІ_-элементов в ООМ 
веб-страницы, как только закончится ее загрузка. Соответствующий код показан в листинге 9.5. 

Листинг 9.5. Вставка исходного НТМІ_ в ООМ и привязка всех необходимых обработчиков событий к 
каждому элементу 

// Отслеживания изображения, которое рассматривается в данный момент 
ѵаг сигішаде = пиіі; 

// Ожидание окончания загрузки страницы перед тем, как вносить 
// изменения или перемещаться по БОМ 
міпсіом . опіоасі = бипсбіоп () { 

/* 

* создание следующей ВОМ-структуры: 

* <сііѵ ісІ="оѵег1ау"></сІіѵ> 

* <сііѵ ісІ="да11егу"> 

* <сііѵ ісІ="да11егу ішаде"Х/сііѵ> 

* <сііѵ ісі="да11егу ргеѵ"Ха Ьгеб="">&1адио; Предыдущее</аХ/сііѵ> 

* <сііѵ ісІ="да11егу пехС'Ха Ьгеб="">Следующее &гадио;</аХ/сІіѵ> 

* <сііѵ ісі="да11егу біі:1е"х/сІіѵ> 

* </сііѵ> 

*/ 

// Создание контейнера для всей галереи 
ѵаг даііегу = босшпепк . сгеабеЕІешепб ("сііѵ") ; 
даііегу.ісі = "даііегу"; 

//И добавление в него всех управляющих контейнеров сііѵ 
даііегу . іппегНТМБ = ' <біѵ ісІ="да11егу ішаде"х/сііѵ> ' + 

' <біѵ ісІ="да11егу_ргеѵ"Ха Ьгеі="">&1адио; Предыдущее</аХ/сііѵ>' + 

' <біѵ іс!="да11егу пехС'Ха Ьгеі="">Следующее &гадио; </аХ/сііѵ> ' + 

' <біѵ ісі="да11егу_біб1е"х/(1іѵ> ' ; 

// Добавление даііегу в БОМ 
босшпепб . Ьобу. аррепбСЬіІсі ( даііегу ); 

// Поддержка обработки каждой ссылки Следующее и Предыдущее 
// на которых был щелчок в пределах галереи 
ісі ( "даііегу^пехб" ) . опсііск = пехбішаде; 
ісі ("даііегу ргеѵ") . опсііск = ргеѵішаде; 

// Обнаружение всех галерей на странице 
ѵаг д = ЬуСІазз( "даііегу", "иі" ); 

// Последовательные перебор всех галерей 
іог ( ѵаг і = 0; і < д.ІепдкП; і++ ) { 

// и обнаружение всех ссылок на демонстрируемые изображения 
ѵаг Ііпк = кад( "а", д[і] ); 
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// Последовательный перебор ссылок на изображения 
іог ( ѵаг д = 0; д < Ііпк . ІепдбЬ; д++ ) { 

// Обеспечение, чтобы по щелчку на ссылке вместо перехода 
// к изображению осуществлялась демонстрация галереи 
// изображений 

Ііпк[д].опсііск = іипскіоп () { 

// Отображение серого фона 
зкоѵЮѵегІау(); 

// Отображение изображения в галерее 
зкомішаде ( ккіз .рагепкЛобе ); 

// Блокировка обычных действий браузера по переходу на 
// изображение 
гебигп іаізе; 

} ; 

} 

// Добавление к галерее средств перехода в режиме демонстрации 
// изображений 
абсІЗІісІеЗком ( д[і] ); 

} 

} ; 


Позаботившись об этом важном шаге, вы можете приступать к созданию различных компонентов самой 
галереи. 

Наложение затемнения 

Сначала мы собираемся создать наложение затемнения, которое используется как ЫдЫіЬох, так и в 
ТЫскВох. Мы собираемся убедиться в том, что по большей части эта довольно легкая задача, имеющая только 
один сложный аспект: налагаемое затемнения должно соответствовать высоте и ширине текущей страницы. Но 
для нас все сложилось удачно, ведь в главе 7 мы уже разрабатывали необходимые для этого функции: 
радеѴѴІсШпО и радеНеід И1:(). 

Начнем с создания простого біѵ-элемента, имеющего атрибут Ю (чтобы позже можно было получить к нему 
доступ) и добавления его к ООМ. Все это показано в листинге 9.6. 

Листинг 9.6. Создание простого біѵ-элемента и добавление его к ООМ 

// Создание полупрозрачного затемнения 
ѵаг оѵегіау = босшпепк . сгеабеЕІешепк ( "сііѵ" ) ; 
оѵегіау.ісі = "оѵегіау"; 

// Обеспечение скрытия фона и галереи по щелчку на сером фоне 
оѵегіау. опсііск = ПісІеОѵегІау; 

// Добавление затемнения к БОМ 
боситепк . Ъобу. аррепсІСкіІсІ ( оѵегіау ); 
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Далее нужно создать две функции, необходимые для скрытия и проявления затемнения. Именно здесь и 
возникают сложности. Сам процесс скрытия и проявления сравнительно прост, но определение правильной 
ширины и высоты затемнения —дело непростое. В обычной ситуации было бы достаточно определить размеры 
высоты и ширины в 100%, но этот подход неприемлем, поскольку пользователь мог для отображения галереи 
прокрутить страницу вниз (и сдвинуть затемнение). Это можно исправить, если сделать высоту и ширину 
затемнения как и у всей страницы. Чтобы определить нужные параметры, можно воспользоваться функциями 
радеНеідІііО и радеѴѴІсіІІпО, разработанными в главе 7. 

Полный код для скрытия и проявления затемнения показан в листинге 9.7. 

Листинг 9.7. Две функции, необходимые для скрытия и проявления затемнения, используемого в галерее 
изображений 

// Скрытие затемнения и текущей галереи 
бипсбіоп НісІеОѵегІау () { 

// Обеспечение перезапуска значения текущего изображения 
сигішаде = пиіі; 

// и скрытия затемнения и галереи 
Ъісіе ( ісі ( "оѵегіау" ) ); 

Нісіе ( ісі ("даііегу") ); 

} 

// Проявление затемнения 
іипсбіоп зііоѵЮѵегІау () { 

// Обнаружение затемнения 
ѵаг оѵег = ісі ("оѵегіау") ; 

// Установка его размеров по высоте и ширине текущей страницы 
// (что будет полезным при использовании прокрутки) 
оѵег. збуіе . ііеідііб = радеНеідііб () + "рх"; 

оѵег. збуіе .місПтЪ. = радеМісНсН () + "рх"; 

// и проявление 
іабеІп( оѵег, 50, 10 ); 

} 

И наконец, давайте присовокупим к этому С55, необходимый для правильного отображения затемнения. 
Соответствующий код показан в листинге 9.8. 

Листинг 9.8. Код С55, необходимый для правильного отображения затемнения 

#оѵег1ау { 

Ьаскдгоипб: #000; 
орасібу: 0.5; 
сіізріау : попе; 
розібіоп: аЬзоІибе; 
бор: Орх; 

Іеіб: Орх; 
місНсН: 100%; 
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ЬеідЫ;: 100%; 
г-іпсіех: 100; 
сигзог: роіпбег; 
сигзог: Ьапсі; 

} 

Собранные воедино, встраиваемый НТМІ_ и С55 приведут к внешнему виду страницы, показанному на 
рис. 9.4. 


ГСапбот Саі Рісіигез 


І_огет ір&ит боіог &і! атеі. сопзесіеіиег абірізсіпд еііі. Миііат аі зет ІЛ иіігісез. боіог зіі атеі ргіагеыа ргеЬит, Іео теіиз ассигтап ита, 
ѳу иіігісез рцгиз аидие аі Іідиіа Маш дгаѵіба Маигіз педие Іасиз, ѵегіісиіа еі. гіѳпбгелі пес. зетрег диіз, піЬгі. ИиІІа Іасііізі. СигаЬіІиг іб 
апіе Ргот Іеііз ірзит. соттобо поп. гіепбгелі еі ііііпсфз іп, егоз. МиІІа ііпскііші ѵиіриіаіе іеііз. МогЬі сопѵаіііз ІіЬего зеб егаі Еііат Іесіиз 
ребе, бюіит еі гиігит іб, соттобо пес, аидие ѴезІіЬиІит тазза Ризсе пес Іеііз Ѵіѵатиз сопзесіеіиег еіетепіит еііі 

Еііат таіііз едезіаз гіНіз Ргот зеб тадпа аі огсі аіідиеі таШз Ѵіѵатиз Іідиіа теіиз, іпіегбит диіз. ѵіѵегга пес. ѵегіісиіа ѵііае, тацлз 
Реііепіездие ѵепепаііз ребе ѵе( аидие АІідиат ЬппдіІІа пипс едеі его5. Реііепіездие еде! ірзит МогЬі аидие. РгаезепІ зіі атеі ірзит. I)! 
ѵііае зет ѳ! еііат таПіз ітрегбіѳі РгіазеІІиз а ребе Бизрѳпбіззѳ роіепь Маесепаз іп зар«ѳп зі! атеі ита иііпсез бідпі&зтѵ Оиіз аіідие! 
ізисіЬиз обіо. Мипс а іигріз ѵііае зет рогіа ѵіѵегга ѴезЬЬиіыт сопѵаіііз бідпіззіт пізі Ризсе епіт. МскЪі диэт РгаезепІ іо бог 
Бизрепбіззе ей боіог. (Л Іетриз Іогіог іп биі. 

Аепеап )изю Іпіедегедезіаз ргіагеіга диат Миііа ІаиоЬиз. ті ѵеі лхЯІіз іетриз, югіог ІіЬего іппдіііа осію, ас іасиііз егоз биатеде) Іосет 
Реііепіездие пес епіт. Сгаз рогіа. йиі5 отаге ІіЬего ѵеі гізиз Іп гіас гіаЬііаззе ріаіеа бісіитзі. Оиіздие Іисіиз, тазза ѵііае ріасега! 
ггіопсиз, педие таипз ІоЪогйз ѳтт, »б иііатсогреѵ биі пипс е! епіт. Іпіедег ІаиоіЬиз ггіопсиз еііі ѴезІіЬиІит иі апіе. МогЪі а зет. 

Ѵіѵатиз асситзап. 


Маесепаз ЫЬепбит Іеііиз аі апіе Маесепаз ргіагеіга ѵоіиіраі таипз Ѵіѵатиз ѵиіриіаіе Реііепіездие пес ребе. Реііепіездие аіідиеі. 
іеііиз пес ріасегаі ЫЬепбит. Іасиз аидие таіііз іеііиз, іб іасиііз епіт аыдие ас заріеп. Маесепаз сотлюбо апіе диіз іеііиз РгіазеІІиз 
іетрог тазза поп таіезиаба сигзиз. 1ог1ог)и5Іо тоіііз біат. едеі задііііз боіог ірзит аі ѵеііі. СигаЫіиг аі ребе ей тадпа зоііісііибіп 
асситзап Оиіз диіз ѵеііі пес ]изЮ сопбітепіит аіідиеі Маипз бідтззіт гт РгіазеІІиз поп таигіз Аіідиат задіКіз Ыапбіі тадпа 

Еііат диат. Зѳб пізі. Маесепаз ѵіѵегга реііепіездие апіе Ризсе ѵиіриіаіе рогіа теіиз. Маесепаз Іигріз ита. рогіа ѵііае. іетрог ѵеі, 
баріішз ѵезЬЬиіит. (ыіз Реііепіездие зі! атеі тзі. СигаЫіиг Ыапбіі Веб іп тзі еі педие сопбітепіит Іэстіа МогЬі агси биі, бідпіззіт іп, 
сопзесіеіиег диіз, дгаѵіба ас. (еііз Ргот Іасіпіа аіідиеі аидие МаигіБ пес обіо. ѴезЬЬиіит ей огсі пес Іідиіа сопзедиаі ггіопсиз РгіазеІІиз 
пипс пипс, ѵиіриіаіе розиеге. зетрег іп, сигзиз пес. огсі. СигаЬіІиг зет іизіо, иііатсогрег ѵііае. абірізсіпд іп. таіезиаба ѵеі, еііі 
Маесепаз еІе«Іепб. іизіо зеб отаге сопзедиаі. зет ірзит реііепіездие іигріз. іп гыігит огсі педие зеб тазза. ѴезЬЬиіит іаогееі биі едеі 
агси. Оиіздие іп Іогет МогЬі диіз Іасиз. Маесепаз попитту теіиз аисіог пипс 
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Рис. 9.4. Результат отображения затемнения, наложенного поверх страницы 

Создав затемнение, и вставив его в страницу, вы будете готовы приступить к отображению изображения 
поверх этого затемнения. 

Позиционируемый контейнер 

Нам нужно создать компонент галереи изображений, который станет контейнером, всплывающим над 
затемнением и содержащим текущее изображение. К сожалению, из-за недостаточной поддержки С55 2 в 
некоторых современных браузерах, реализация этого шага представляет определенные трудности. При должной 
поддержке С55, изображение просто будет иметь фиксированную позицию (создавая тем самым иллюзию 
позиционирования поверх всего остального, независимо от текущей позиции прокрученной страницы). 

Начнем с предположения, что у нас на странице уже есть ЭОМ-структура вроде той, что показана в 
листинге 9.9 (и что вы ее уже добавили к той странице, что была показана в листинге 9.5). 


Листинг 9.9. НТМЬдля отображения позиционированной галереи изображений поверх затемнения 
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<сііѵ ісІ="да11егу"> 

<сііѵ ісі="да11егу ітаде"х/сІіѵ> 

<сііѵ ісі="да11егу ргеѵ"Ха Ьгеі="">&1адио; Предыдущее</аХ/сііѵ> 
<сііѵ ісі="да11егу пехб"Ха Ьгеі="">Следующее &гадио;</аХ/сІіѵ> 
<сііѵ ісі="да11егу біб1е"х/сІіѵ> 

</с!іѵ> 


Обладая основной НТМІ_-структурой, нужно создать соответствующую функцию для проявления сііѵ- 
контейнера галереи и добавления к нему изображения. Существует несколько способов запуска такой функции, 
но наиболее очевидным будет запуск при щелчке пользователя на одном из изображений вашей галереи 
(показанном на основной НТМ1_-странице), после которого поверх всего остального проявляется его увеличенная 
версия. Функция, осуществляющая такое отображение, показана в листинге 9.10. 

Листинг 9.10. Показ галереи на основе выбранного изображения 

// Отображение текущей галереи изображений 
іипсбіоп зЬомІшаде (сиг) { 

// Запоминание текущего рабочего изображения 
сигішаде = сиг; 

// Обнаружение изображения галереи 
ѵаг ішд = ісІ("да11егу ішаде"); 

// Удаление изображения, если таковое уже было отображено 
іі ( ішд . іігзбСЬіІсІ ) 

ішд . гетоѵеСЬіІсІ ( ішд . іігзбСЬіІсІ ); 

// и добавление вместо него нового изображения 

ішд. аррепсЮЬіІсІ ( сиг . іігзбСЬіІсІ . сІопеЛосІе ( бгие ) ); 

// Установка надписи изображения галереи в качестве содержимого 
// аргумента 'аіб' обычного изображения 

Іс1("да11егу бібіе") . іппегНТМЬ = сиг . іігзССЬіісі . іігзбСЬіІсІ. аіб; 

// Обнаружение основной галереи 
ѵаг даііегу = ісі ("даііегу") ; 

// Установка правильного класса (чтобы был получен правильный размер) 
даііегу.сіаззЛаше = сиг .сІаззЛаше; 

// Постепенное проявление 
іасіеіп ( даііегу, 100, 10 ); 

// Обеспечение позиционирования галереи в правильном месте 
// экрана 
ас^ изб () ; 

} 

Последним шагом в функции збоѵѵітаде вызывается функция афіизі:. Эта функция отвечает за 
перепозиционирование галереи изображений на точный центр пользовательского окна (даже если пользователь 
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осуществил прокрутку или изменил размеры окна). Этот важный шаг, который позволяет галереи выглядеть и 
вести себя вполне естественно, показан в листинге 9.11. 

Листинг 9.11. Перепозиционирование галереи на основе высоты и ширины изображения, и того места, до 
которого была осуществлена пользовательская прокрутка 

// Перепозиционирование галереи по центру видимой части страницы 
// даже после ее прокрутки 
бипсбіоп асІди5б(){ 

// Обнаружение галереи Ьосабе бНе даііегу 
ѵаг оі^ = ісі ( "даііегу" ) ; 

// Определение существования галереи 
іб ( !оЬд ) гебигп; 

// Определение ее текущей высоты и ширины 
ѵаг и = дебКісІбЬ. ( оЬ^ ) ; 
ѵаг Н = дебНеідбб ( ок^ ) ; 

// Вертикальное позиционирование контейнера по средине окна 

ѵаг б = зсгоІІУО + ( міпбомНеідІтб () / 2 ) - ( Ь. / 2 ) ; 

// Но не выше верхней части страницы 
іі (б<0) 6=0; 

// Горизонтальное позиционирование контейнера по средине окна 
ѵаг 1 = зсгоІІХО + ( ѵгіпсіоѵгѴУісі'Ыі () / 2 ) - ( и / 2 ); 

// Но не левее, чем левый край страницы 
іі ( 1 < 0 ) 1=0; 

// Установка выверенной позиции элемента 
зебУ( оЬ), б ); 
зебХ( оЬ^, 1 ) ; 

} ; 


// Корректировка позиции галереи после каждого применения прокрутки страницы 
// или изменения размеров окна браузера 
иіпсіои. опгезіге = босшпепб . опзсгоіі = ас^изб; 


И наконец, в листинге 9.12 показан код С55, необходимый для сохранения правильного 
позиционирования галереи. Можно заметить, что на самом деле это ничто иное, как абсолютно 
спозиционированный сііѵ-контейнер с большим показателем стилевого свойства 2 -іпсІех, позволяющим поместить 
его поверх всего остального, что есть на странице. 


Листинг 9.12. Код С55 для правильного позиционирования галереи 
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#да11егу { 

розкіоп: аЪзоІиРе; 
місІРІі: 650рх; 
ЬеідііР: 510рх; 
Ъаскдгоипсі: #ЕЕІГ; 
г-іпсіех: 110; 
сіізріау: попе; 

} 

#да11егу_РіР1е { 

розіРіоп: аЪзоІиРе; 
ЪоРРот: 5рх; 

ІеРР: 5рх; 
місІРЬ: 100%; 
РопР-зіге: Ібрх; 
РехР-аІідп: сепРег; 

} 

#да11егу ішд { 

розіРіоп: аЪзоІиРе; 
Рор: 5рх; 

ІеРР: 5рх; 
місІРЬ: 64 0рх; 
ЬеідііР: 480рх; 
Ьогсіег: Орх; 
г-іпсіех: 115; 

} 

#да11егу.Раіі { 
місІРЬ: 430рх; 
ЬеідііР: 590рх; 

} 

#да11егу.Раіі ішд { 
місІРЬ: 420рх; 
ЬеідііР: 560рх; 

} 


Теперь, добившись совместной работы С55, НТМІ_ и ІаѵаЗсгірІ, мы получили позиционированную галерею 
изображений, которая, судя по рис. 9.5, выглядит довольно неплохо. 
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шсш5 главка ѵпао ріасегаі топсиз, педие таипз кюопіз ешт, іа иматсогрег аиі пипс еі епіт. іпіедег іаисюиз топсиз 
еііі ѴезЬЬиІит иіапіе. МогЬІ а зет. Ѵіѵатиз асситзап 


Маесепаз ЬіЬепсіит іеііиз аі апіе Маесепаз рЬагеІга ѵоіиіраі таипз Ѵіѵатиз ѵиіриіаіе Реііепіездие пес ресіе 
Реііепіездие аіідиеі. Іеііиз пес ріасегаі ЫЬепОит. Іасиз аидие таКіз Іеііиз, ісі іасиііз епіт аидие ас заріеп Маесепаз 
соттосіо апіе диіз Іеііиз РЬазеІІиз Іетрог, тазза поп таіезиаОа сигзиз. Іопог |изІо тоІІІз Оіат, едеі задіІЬз Ооіог ірзит 
аі ѵеііі. СигаЬІІиг а) ре сіе ей тадпа зоііісііисііп асситзап. Оиіз диіз ѵеІІІ пес |из!о сопЫтепІит аіідиеі Маипз йідтззіт ті 
РЬазеІІиз поп таипз АІідиат задіійз ЫапОіі тадпа 


Еііат диат. 5ей пізі Маесепаз ѵіѵегга реііепіездце апіе. Ризсе ѵиіриіаіе рогіа теіиз Маесепаз (игріз ита. роПа ѵКае. 
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Маесепаз ЬіЬепОит Іеііиз аі апіе Маесепаз рЬагеІга ѵоіиіраі таигіз. Ѵіѵатиз ѵиіриіаіе. Реііепіездие пес ресіе 
Реііепіездие аіідиеі іеііиз пес ріасегаі ЬіЬегкіит. Іасиз аидие таПіз Іеііиз. Ій іасиііз епіт аидие ас заріеп Маесепаз 
соттосіо апіе диіз Іеііиз РЬазеІІиз Іетрог, тазза поп таіезиасіа сигзиз. Іопог іизіо тоІІІз Оіат, едеі задіійз Ооіог ірзит 
аі ѵеііі СигаЬІІиг а< ресіе ей тадпа зоііісііисііп асситзап Оиіз дшз ѵеііі пес іизіо сопПітепІит аіідиеі Маигіз Оідтззіт ті 


Рис. 9.5. Позиционированная галерея изображений, помещенная поверх затемнения 

После того как важный шаг по созданию красивой галереи изображений уже позади, нужно сосредоточить 
усилия на облегчении пользователю переходов по различным изображением галереи. 


Переходы 

Когда изображение отображено поверх всей остальной страницы (а между ним и страницей наложено 
затемнение), ко всему этому нужно добавить лучшие средства для осуществления переходов между различными 
изображениями галереи. Чуть раньше, когда мы задавали НТМІ_ для затемнения галереи, туда были включены 
ссылки, которые можно было использовать для осуществления переходов. Эти ссылки позволяют пользователю 
перемещаться по галерее взад-вперед, сохраняя затемнение. 

Отслеживая, какое именно изображение просматривается в данный момент, вы можете добавить это 
функциональное свойства к своей галерее (в данном случае ссылка на изображение хранится в переменной 
сигітаде). Оперируя этими сведениями, можно легко определить, в какое изображение галереи просматривается, 
и осуществить перемещение в нужном пользователю направлении (см. листинг 9.13). 

Листинг 9.13. Две функции, необходимые для того, чтобы направить пользователей на желаемую ими 
позицию в галерее 

// Обнаружение и отображение предыдущего изображения 
Іипсбіоп ргеѵІшадеО { 
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// Определение местоположения и демонстрация предыдущего изображения 
// галереи 

зііомітаде ( ргеѵ ( сигішаде ) ); 

// Блокировка обычных действий ссылки 
гебигп баізе; 

} 

// Обнаружение и отображение следующего изображения 
бипсбіоп пехбітаде () { 

// Определение местоположения и демонстрация следующего изображения 
// галереи 

зііомітаде ( пехб( сигішаде ) ); 

// Блокировка обычных действий ссылки 
гебигп баізе; 

} 


Особенность ссылок перемещений состоит в том, что нужно определить, когда именно уместно вывести их 
отображение. Нужно обеспечить, чтобы ссылки показывались только тогда, когда в галерее до и после текущего 
изображения есть изображения, на которые можно перейти. Контекстуальное скрытие или появление ссылок в 
галерее изображений будет использовано из функции 5ІпоѵѵІтаде() для отображения этих ссылок там, где это 
уместно. Код, управляющий состоянием средств управления переходами показан в листинге 9.14. 

Листинг 9.14. Определение, когда должны быть показаны или скрыты ссылки перехода Следующее и 
Предыдущее 

// Скрытие ссылки Следующее, если мы дошли до конца показа 
іб ( !пехб(сиг) ) 

Ьібе ( ісі ("да11егу_пехб") ); 

// Если нет, обеспечение ее показа 
еізе 

зЬом ( ісі ("да11егу_пехб") ); 

// Скрытие ссылки Предыдущее, если мы дошли до начала показа 
іб ( Іргеѵ(сиг) ) 

Нісіе ( ісі ( "да11егу_ргеѵ" ) ); 

// Если нет, обеспечение ее показа 
еізе 

зііом ( ісі("да11егу ргеѵ") ); 


И наконец, в листинге 9.15 показан код С55, необходимый для правильного позиционирования ссылок 
перехода. 

Листинг 9.15. Код С55, необходимый для позиционирования ссылок перехода 


#да11егу ргеѵ, #да11егу пехб { 
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розіЬіоп: аЪзоІибе; 

Ъоббот: Орх; 
гідЬР: Орх; 
г-іпсіех: 12 0; 

’місі'Ып: 60рх; 
бехб-аіідп: сепбег; 
ігопр-зіге: 12рх; 
расЫіпд: 4рх; 

} 

#да11егу_ргеѵ { 

Іебб: Орх; 

} 

#да11егу_ргеѵ а, #да11егу_пехб а { 
соіог: #000; 
бехб-сіесогабіоп: попе; 

} 


На рис. 9.5 показан пример использования ссылок перехода. Обратите внимание, что в нижней части 
галереи изображений показана ссылка, направляющая пользователя на просмотр следующего изображения 
галереи. Ссылка показывается и скрывается в соответствии с тем, в каком месте галереи находится 
просматриваемое пользователем изображение. 

Демонстрация изображений 

Финальная часть создания галереи изображений придаст ей черты привлекательности, которые могут 
обрадовать многих пользователей: динамическая, изящная демонстрация всех изображений галереи. По 
сравнению с предыдущей работой по созданию переходов по изображениями, это дополнение не потребует 
особых усилий. Все очень просто. Процесс создания демонстрационного режима разбивается на два шага: 

• Создание в документе дополнительной ссылки, по щелчку на которой пользователь мог бы запустить 
демонстрацию. 

• Создание демонстрационного процесса как такового (управляющего тем, какие изображения показывать, 
и как переключаться между ними). 

Первый шаг показан в листинге 9.16. 

Листинг 9.16. Добавление к ООМ дополнительного навигационного элемента для запуска демонстрации 
изображений 

бипсбіоп асісізіісіезііом ( еіеш ) { 

// Мы собираемся создать некоторую дополнительную контекстную 
// информацию, сопровождающую демонстрацию 

// создание заголовка демонстрации и его контейнера 
ѵаг сііѵ = боситепб . сгеабеЕІетепб ( "сііѵ" ) ; 
сііѵ . сІаззЛаше = "зіісіезііом"; 



199 


// Отображение имени демонстрации на основе названия галереи 
ѵаг зрап = босишепб. сгеабеЕІешепб ("зрап"); 
зрап. іппегНТМЬ = д[і] . ЫЫе; 
сііѵ . аррепсІСіііІсІ ( зрап ); 

// Создание ссылки, позволяющей увидеть демонстрацию всех 

// изображений галереи 

ѵаг а = боситепЬ. сгеаЬеЕІетепЬ ("а") ; 

а. Иге! = 

а.іппегНТМЬ = "&гадио; Просмотреть демонстрацию изображений"; 

// Обеспечение запуска демонстрации по щелчку на ссылке 
а.опсііск = іипсбіоп () { 

збагЬ8Ьом( Ытіз . рагепЬЫобе . пехЬЗіЫіпд ); 
гебигп іаізе; 

} ; 


// Добавление нового управляющего элемента и заголовка к странице 
сііѵ. аррепбСЬіІсі ( а ); 

е1ет.рагепЫ\ІосІе . іпзегЬВеіоге ( сііѵ, еіет ); 


А теперь настало время создать средство управления всей серией демонстрационной анимации. Все 
управление построено на серии временных задержек, инициализация которых происходит одновременно 
(поскольку они настроены так, что их сроки истекают с разносом по времени). Конечный результат выражается в 
плавной, изящной демонстрации, создающей весьма цельное представление. Код, запускающий демонстрацию, 
показан на рис. 9.17. 

Листинг 9.17. Код, запускающий демонстрацию конкретной галереи 

// Запуск демонстрации всех изображений, находящихся в конкретной галерее 
іипсбіоп збагЬЗііом (оЬ) ) { 

// Определение местонахождения всех отдельных изображений галереи 
ѵаг еіет = Сад( "1і", оЬ) ); 

// Определение местонахождения всей демонстрируемой галереи 
ѵаг даііегу = ісі ( "даііегу") ; 

// Последовательный перебор всех, принадлежащих галереи изображений 
іог ( ѵаг і = 0; і < еіет.ІепдЫт; і++ ) пей іипсбіоп() { 

// Запоминание, на какой текущий элемент была ссылка 
ѵаг сиг = е1ет[і]; 

// Мы собираемся показывать новое изображение каждые 5 секунд 
зеЬТітеоиб(іипсііоп(){ 

// Отображение отдельного изображения 
зііо'мітаде ( сиг ) ; 


//И начала его растворения после 3,5 секунд 
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// (со временем растворения в 1 секунду) 
зебИтеоиб ( бипсбіоп () { 

ІасІеОиІ: ( даііегу, 0, 10 ); 

}, 3500 ) ; 

}, і * 5000 ) ; 

} ; 


// А затем скрытие затемнения, когда все закончится 
561:111116041: ( ЬісІеОѵегІау, 5000 * еіегп. Іепд'Ыі ); 

// Но появление затемнения при запуске демонстрации 
зііомОѵегІау(); 

} 

В завершение нужно не забыть добавить код С55 для ссылки на запуск демонстрации. Соответствующий 
код показан в листинге 9.18. 

Листинг 9.18. Дополнительный код С55 для отображения ссылки на запуск демонстрации 

сііѵ . зіісіезііом { 

СехС-аІідп : гідЫ:; 
расЫіпд: 4рх; 
шагдіп-бор: Юрх; 
розібіоп: геіабіѵе; 

} 

сііѵ. зіісіезііом зрап { 

розібіоп: аЬзоІибе; 

ЬоССош: Зрх; 

Іебб: Орх; 
іопб-зіге: 18рх; 

ІопС-'меідЫ:: Ьоісі; 

} 

сііѵ. зИйезЪом а { 
соіог: #000; 

} 


Изготовить копию экрана, показывающую демонстрацию в действии очень сложно, но на рис. 9.6 можно 
как минимум посмотреть на ссылку запуска, добавленную на страницу. 

Представленные ранее демонстрация и переходы по изображениям послужили реальным началом показа 
возможностей по созданию своих собственных динамических веб-приложений (к примеру, части 
презентационного программного обеспечения). Чтобы получить более четкое представление о том, как работает 
демонстрация изображений, я рекомендую вам установить кол, представленный в этой главе, и посмотреть на 
простые, но убедительные результаты его работы. 
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ШСШ5, гтіаіьй ѵі ие ріасегаі топси» педие гпаипв юного* етт іа иііатсогрег аиі пипс еі епіт іпіедег іаипии* гпопсиэ 
еііі ѴезІіЬиІит и( ап(е. МогЬі а зет. ѴІѵатиз асситзап 

Маесепаз ЬіЬепсіит Іеііиз а( апіе Маесепаз ргіагеіга ѵоіиіраі таигіз. ѴІѵатиз ѵиіриіаіе Реііепіездие пес рейе 
РеіІепіе5яие аіідиеі, Іеііиз пес ріасегаі ЬіЬепсіит, Іасиз аидие таПіз (еііиз. к) іэсиііз етт аидие ас заріеп Маесепаз 
соттосіо апіе диіз Іеііиз РгіазеІІиз іетрог. тазза поп таіезиасіа сигзиз. (оПог ]изЮ тоіііз сііат, еде! задіПіз сіоіог ірзит 
аі ѵеііі. СигаЬіІиг аі реОе ей тадпа зоііісііисііп асситзап йиі* диіз ѵеііі пес]изЮ сопсіітепіит аіідиеі Маигіз сіідпіззіт ті 
РгіазеІІиз поп таигіз. АІідиат задіПіз Ыапсііі тадпа 

Еііат диат. Зегі пізі Маесепаз ѵіѵегга реііепіездие апіе Ризсе ѵиіриіаіе рогіа теіиз, Маесепаз Іигріз цта, рогіа ѵііае, 
Іетрог ѵеі, ОаріЬиз ѵезІіЬиІит, Іеііз Реііепіездие зіі атеі пізі СигаЬіІиг ЫапсІіІ 5е0 іп пізі еі педие сопсіітепіит Іасіпіа. 
МогЬі агсц Оиі, сіідпіззіт іп, сопзесіеіиег диіз, дгаѵісіа ас. іеііз Ргот Іасіпіа аіідиеі аидие Маигіз пес оОіо ѴезІіЬиІит ей 
огсі пес Іідиіа сопзедиаі гЬопсиз. РЬазеІІиз пипс пипс, ѵиіриіаіе розиѳге. зетрег Іп, сигзиз пес. огсі. СигаЬіІиг зет іизіо, 
иііатсогрег ѵііае, агіірізстд іп, таіезиасіа ѵеі, еііі. Маесепаз еіеііепгі іизіо зегі огпаге сопзедиаі, зет ірзит реііепіездие 
Іигріз. іп гиігит огсі педие зегі тазза. ѴезІіЬиІит ІаогееІ гіиі едеі агси. Оиіздие іп Іогет. МогЬі диіз Іасиз. Маесепаз 
попитту теіиз аисіог пипс. 

Капсіот Саі Рісіигез »Ѵіеѵ/ аз а 51і0езгіоѵѵ 


Ьогет ірзит сіоіог зіі атеі, сопзесіеіиег асіірізсіпд еііі (МиНат аі зет. III иіігісез. сіоіог зіі атеі ргіагеіга ргеііит, Іео теіиз 
асситзап ита, ей иіігісез ригиз аидие аі Іідиіа. Ыат дгаѵісіа. Маигіз педие Іасиз, ѵегіісиіа еі, гіепОгегі! пес. зетрег диіз. 
піЬЬ. N0113 Іасііізі. СигаЬіІиг ісі апіе. Ргоіп Іеііз ірзит. соттосіо поп. гіепсігегіі еі иіігісез іп. егоз МиІІа ііпсігіипі ѵиіриіаіе 
Іеііз. МогЬі сопѵаіііз ІіЬего зегі егаі Еііат Іесіиз реОе. сіісіит еі. гиігит ісі, соттосіо пес. аидие ѴезІіЬиІит тазза Ризсе 
пес Іеііз. ѴІѵатиз сопзесіеіиег еіетепіит еііі 

Еііат таПіз едезіаз Іеііз. Ргоіп зе<1 тадпа аіогсі аіідиеі таШз ѴІѵатиз Іідиіа теіиз, іпіегсіит диіз, ѵіѵегга пес, ѵегіісиіа 
ѵііае, таигіз. Реііепіездие ѵепепайз реОе ѵеі аидие. АІІдиат ІгіпдіІІа пипс едеі егоз. Реііепіездие едеі ірзит. МогЬі 
аидие. РгаезепІ зіі атеі ірзит. III ѵііае зет еі сііат таійз ітрегйіеі. РгіазеІІиз а реОе. Зизрепсііззе роіепіі Маесепаз іп 
заріеп зіі атеі ита иіігісез сіідпіззіт. Оиіз аіідиеі ІаисгЬиз осію Мипс а Іигріз ѵііае зет рогіа ѵіѵегга ѴезІіЬиІцт сопѵаіііз 
сіідпіззіт пізі Ризсе епіт. МогЬі диат РгаезепІ Іогіог Зизрепгііззе ей сіоіог ШІетриз ІоПог іп Оиі 

Аепеап іизіо. Іпіедег едезіаз ргіагеіга диат МиІІа ІаисіЬиз. ті ѵеі тоіііз Іетриз. іогіог ІіЬего ІгіпдіІІа о сію, ас іасиііз егоз 
диат едеі Іогет. Реііепіездие пес епіт. Сгаз рогіа. Оиіз отаге ІіЬего ѵеі гізиз. Іп гіас гіаЬіІаззе ріаіеа Оісіитзі Оиіздие 
ІисІиз. тазза ѵііае ріасегаі ггіопсиз. педие таигіз ІоЬогйз епіт. ісі иііатсогрег сіиі пипс еіепіт. Іпіедег ІаисіЬиз ггіопсиз 
еііі ѴезІіЬиІит иі апіе МогЬі а зет. ѴІѵатиз асситзап. 

Маесепаз ЬіЬепОит Іеііиз аі апіе Маесепаз ргіагеіга ѵоіиіраі таигіз ѴІѵатиз ѵиіриіаіе. Реііепіездие пес ресіе. 
Реііепіездие аіідиеі, Іеііиз пес ріасегаі ЬІЬепсІит, Іасиз аидие таПіз (еііиз, ісі іасиііз епіт аидие ас заріеп. Маесепаз 
соттосіо апіе диіз (еііиз. РгіазеІІиз Іетрог. тазза поп таіезиасіа сигзиз. Іогіог іизіо тоіііз сііат, едеі задіПіз сіоіог ірзит 
аі ѵеііі СигаЬіІиг аі ресіе ей тадпа зоііісііисііп асситзап. Оиіз диіз ѵеііі пес іивЮ сопсіітепіит аіідиеі Маигіз сіідпіззіт ті. 

РЬасАІІпс плп таигіс ДІітіат сапіИіс ЫапНі* талпа 


Рис. 9.6. Дополнительная ссылка на запуск демонстрации, добавленная на страницу 


Вывод 

Галерея изображений, переходы по изображениям и их автоматическая демонстрация, представленные в 
этой главе, реально показывают пользу от применения ООМ-сценариев для создания дополнительных 
функциональных возможностей на веб-станице, не создающих каких-либо существенных трудностей или 
неразберихи. Опираясь на все ранее изученное, можно прийти к очевидному выводу, что для динамического, 
ненавязчивого применения ООМ-сценариев нет практически ничего невозможного. 

В этой главе были рассмотрены две другие галереи изображений, вдохновившие нас на создание своего 
собственного экземпляра. Затем мы определили для галереи стандартный НТМЬ-синтаксис и порядок ее 
отображения, а также набор ее основных комплектующих (включая затемнение, позиционируемый контейнер и 
переходы по изображениям). В качестве заключительного аккорда, мы добавили запускаемую пользователем 
автоматическую демонстрацию изображений. Таким образом без лишней суеты и с минимальным объемом кода мы 
создали мощный фрагмент динамического сценария, использующего объектную модель документа. 


Глава 10 Введение в А^ах 
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А)ах — это термин, придуманный Джесси Джеймсом Гарретом (Іеззе Іатез СаггеЩ из компании Абарііѵе 
РаЫп для объяснения асинхронной связи между клиентом и сервером, открывающей возможности использования 
объекта ХМИ-трРециез!:, предоставляемого всеми современными браузерами. А)ах — это всего лишь термин, 
означающий Азупсітгопоиз ІаѵаЗсгірІ: и ХМІ_, который используется для краткого изложения технологии, 
необходимой для создания динамического веб-приложения. Кроме того, отдельные компоненты технологии А)ах 
являются полностью взаимозаменяемыми — вполне приемлемо, к примеру, вместо ХМІ. использовать НТМЬ. 

В этой главе мы собираемся рассмотреть детали формирования полноценного А)ах-процесса (который 
концентрируется на осуществлении запроса от браузера к серверу). Будет рассмотрено все, от физического 
запроса как такового, до ІаѵаЗсгірІ-взаимодействия и работы с данными, необходимой для выполнения всей 
работы. Сюда включаются: 

• Исследование различных типов НТТР-запросов и определение, как наилучшим образом отправить объекты 
данных на сервер. 

• Рассмотрение всего ННр-ответа и попытка обработки всех ошибок, которые могут с ним произойти, 
включая истечение времени отклика сервера. 

• Чтение данных, присланных сервером в ответ, перемещение по ним и их обработка. 

Полностью разобравшись с тем, как осуществляется Аіах-процесс и как он может быть реализован, вы 
поймете, как он может быть использован во всем, от типичных ситуаций, до полноценных приложений. В 
главах 11, 12 и 13, мы также будем рассматривать ряд случаев использования А)ах-технологий. 

Использование Аіах 

Для создания простой А)ах-реализации не требуется большого объема кода, но ее предоставляемые ею 
возможности впечатляют. К примеру, вместо того, чтобы заставлять пользователя после отправки формы целиком 
запрашивать всю страницу, процесс отправки может быть обработан асинхронно, и после его завершения будет 
отображена только небольшая часть страницы с желаемыми результатами. Например, процесс поиска доступных 
доменных имен (с целью их приобретения) может быть медленным и трудоемким. Как только вам захочется найти 
новое имя , нужно набирать запрос в форме, отправлять его, и наблюдать за перезагрузкой страницы. С 
использованием А)ах можно получить мгновенный результат, такой, как, к примеру, предоставляет веб¬ 
приложение Іпзіапі Оотаіп Зеагсб (Мір:// іпзІапІсіотаіпБеагсІт.сот/), показанное на рис. 10.1. 



ТЫі іііе Ьеір* уои Ппсі гЬе ПдЫ гіотаіп пате—а$ Га« а$ уои сап туре. 


ргс^аѵазс 


.сот і$ аѵаіІаЫе! 

.пе( і& аѵаіІаЫе! 

.огд і$ аѵаіІаЫе! 

УаЬоо: $1.99 $ресіаІ! 

УаЬоо: $1.99 $ресіаІ> 

УаЬоо: $1.99 $ресіаІ! 

1 & 1: $5.99 

1& 1: $5.99 

1 & 1: $5.99 

СоОасШу $8.95 

СоРасІсІу $8.95 

Сойасісіу $8.95 

ОгеатИо«: $9.95 

ОеатЬоя: $9.95 

ОгеатЬоЯ: $9.95 

N61501 $14.99 

ЫейоІ $14.99 

Ыеі5оІ: $14.99 


Рис. 10.1. Пример использования Іпзіапі Оотаіп ЗеагсН для поиска доменных имен по мере набора текста 


НТТР-запросы 
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Пожалуй наиболее важным и, наверное, самым совместимым аспектом А)ах является та часть процесса, 
которая относится к НТТР-запросу. НурегІехі ТгапзГег РгоІосоІ (НТТР) был разработан для простой передачи НТМІ_- 
документов и однородных файлов. К счастью все современные браузеры поддерживают средства для 
динамической установки НТТР-соединения с использованием ІаѵаБсгірІ. Как показала практика, эти средства 
очень полезны для разработки более «отзывчивых» веб-приложений. 

Асинхронная отправка данных на сервер и получение в ответ дополнительных данных является основным 
назначением А)ах. Как именно отформатированы данные в конечном счете зависит от определенных вами 
требований, которые будут рассмотрены разделе «Обработка данных ответа». 

В следующих разделах мы собираемся посмотреть, как форматировать данные, передаваемые на сервер с 
использованием НТТР-запросов. Затем мы собираемся рассмотреть, как устанавливаются основные соединения с 
сервером, и посмотреть на подробности их реализации в кроссбраузерной среде. 

Установка соединения 

Первоначальным аспектом А)ах-процесса является открытие соединения с сервером. Чтобы этого добиться 
существует несколько различных способов, но мы рассмотрим специфические средства, с помощью которых 
можно легко не только послать, но и получить данные. Эта технология обычно называется «использование 
объекта ХМШИрКециез!». 

В зависимости от пользовательского браузера передача данных производится двумя различными 
способами применения объекта ХМШІІрЯериезІ: 

• ІпіегпеІ Ехріогег, которые впервые проложил путь этому средству браузерной передачи данных, 
устанавливает все свои соединения с помощью АсІіѵеХОЬцесІ (конкретная версия которого изменяется в 
зависимости от версии ІпіегпеІ Ехріогег). К счастью, Іпіегпеі Ехріогег 7 обладает собственной поддержкой 
объекта ХМЬНИрЯериезІ:. 

• Все остальные современные браузеры локализовали все возможности ХМЬННрЯециез! в объекте под 
тем же названием. К их числу относятся Рігеіох, Орега и Баіагі. 

Хорошо, что несмотря на отличия существующего в ІпІегпеі Ехріогег метода создания объекта 
ХИШИрРециез! от метода, используемого во всех остальных современных браузерах, у этого объекта такой же 
набор полезных функциональных свойств. Объект ХИШИрРециез! обладает рядом методов, используемых для 
установки соединения и чтения данных с сервера. В листинге 10.1 показано, как послать на сервер основной СЕТ- 
запрос. 


Листинг 10.1. Кроссбраузерное средство создания НТТР СЕТ-запроса на сервер 

// Если используется ІЕ, создание для объекта ХМЬНЬЬрК.едиезЬ программного 
// обрамления 

іТ ( ЬуреоТ ХМЬНЬЬрК.едиезЬ == "ипсІеТіпесІ" ) 

ХМЬНЬЬрВедиезЬ = Типсбіоп () { 

//В ІпЬегпеЬ Ехріогег для создания нового объекта ХМЬНббрК.едиезб 
// используется АсбіѵеХОЬ )есб 
гебигп пем АсбіѵеХОЬі есб( 

// ІЕ 5 использует ХМЬНТТР объект, отличающийся от объекта, 

// используемого в ІЕ б 

паѵідабог . изегАдепб . іпбехОТ ( "М8ІЕ 5") >= 0 ? 

"МісгозоТб.ХМЬНТТР" : "Мзхш12.ХМЬНТТР" 
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) ; 

} ; 

// Создание объекта запроса 
ѵаг хші = пем ХМЬН'Ь'ЬрК.едиез'Ь () ; 


// Открытие сокета 

хші .ореп("СЕТ", "/зоше/игі . сді" , бгие); 

// Установка соединения с сервером и отправка любых дополнительных 
// данных 
хші . зепб (); 

Как видите, код, необходимый для установки соединения с сервером, совсем простой, и его создание не 
требует практически никаких усилий. Сложности возникают, когда дело доходит до дополнительных 
возможностей (например, до проверки истечения срока запроса или измененных данных); но эти детали мы 
рассмотрим в разделе «НТТР ответ». 

Самая важная особенность всей методологии Аіах состоит в передаче данных от клиента (например, веб¬ 
браузера) к серверу. С учетом этого давайте рассмотрим детали, необходимые для упаковки данных и отправки 
их на сервер. 

Преобразование данных в последовательную форму 

Первой стадией отправки данных на сервер является приведение их к такому формату, который может 
быть легко прочтен сервером; этот процесс называется преобразованием в последовательную форму 
(сериализацией). Существует два варианта сериализации, которые могут предоставить вам самый широкий 
диапазон возможностей передачи: 

• Передача обычного объекта ІаѵаЗсгірІ, который может быть использован для хранения пар ключ-значение 
(где значения представлены либо числами, либо строками). 

• Передача значений из нескольких элементов ввода формы (этот вариант отличается от первого тем, что в 
нем имеет значение порядок передаваемых элементов, тогда как порядок значений, передаваемых в 
первом случае, может быть абсолютно произвольным). 

Давайте посмотрим в листинге 10.2 несколько примеров типов данных, которые можно передать на 
сервер, а также на получившееся из них на выходе последовательное представление, воспринимаемое сервером. 

Листинг 10.2. Примеры простых ІаѵаЗсгірі-объектов, преобразованных в последовательную форму 

// Простой объект, хранящий пары ключ-значение 
{ 

паше: "ЦоПп", 

Іазб: "Кезід", 
сібу: "СашЬгісіде" , 
гір: 02140 

} 


// Последовательная форма 

паше=По1іп&1аз1:=Кезід&сі1;у=СатЬгі(1де&2Ір=02140 
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// Другой набор данных, имеющий множество значений 


{ 

паше: 

"паше", 

ѵаіие: 

"ііоііп" 

}, 

{ 

паше: 

"Іазб" , 

ѵаіие: 

"Кезід" 

Ь 

{ 

паше: 

"Іапд" , 

ѵаіие: 

"ТаѵаЗсгірб 

{ 

паше: 

"Іапд" , 

ѵаіие: 

"Регі" 

}, 

{ 

паше: 

"Іапд", 

ѵаіие: 

"Таѵа" 

} 


] 

//И последовательная форма этих данных 

паше=ДоЬп&1а5б=К.е5Ід&1апд=ДаѵаЗсгір1:&1апд=Рег1&1апд=Даѵа 

// В завершение найдем несколько элементов ввода (используя метод 
// ісі () , который мы создали в главе, посвященной БОМ) 

[ 

ісі ( "паше" ), 
ісі ( "Іазб" ) , 
ісі ( "изегпаше" ), 
ісі ( "раззмогб" ) 

] 

//И превратим их в строку данных 

пате=і1оіт&1азб=К.езід&изегпате= ) егезід&раззѵгогс^безб 

Формат, использованный для сериализации данных является стандартным форматом для передачи в НТТР- 
запросе. Вы, наверное, их уже видели в стандартном НТТР СЕТ-запросе, который выглядит следующим образом: 

Ьббр: // зошеигі . сот/ ?паше=Доііп&1азі:=К.езід 

Эти данные также могут быть переданы в Р05Т-запрос (и в намного большем количестве, чем в простое 
отправление). Мы рассмотрим эти отличия в будущем разделе. 

На данный момент давайте создадим стандартные средства сериализации структур данных, 
представленных в листинге 10.2. Специальная функция, выполняющая эту задачу, показана в листинге 10.3. Она 
способна преобразовать в последовательную форму большинство элементов ввода формы, за исключением 
элементов, имеющих множественный выбор. 

Листинг 10.3. Стандартная функция для сериализации структур данных в совместимую с НТТР схему 
параметров 

// Сериализация набора данных. Может воспринимать два различных типа 
// объектов: 

// - массив элементов ввода 

// - хэш, составленный из пар ключ-значение 
// Функция возвращает последовательную строку данных 
іипсбіоп зегіаііге(а) { 

// Набор результатов сериализации 
ѵаг з = []; 

// Если передан массив, предположение, что он является массивом 
// элементов формы 
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іб ( а. сопзбгисбог == Аггау ) { 

// Сериализация элементов формы 
бог ( ѵаг і = 0; і < а.ІепдбЬ; і++ ) 

5.ризЬ( а[і] .паше + " = " + епсобеШИСотропепб ( а[і] .ѵаіие ) ); 

// Если нет, предположение, что это объект, состоящий 
// из пар ключ-значение 
} еізе { 

// Сериализация пар ключ-значение 
бог ( ѵаг ] іп а ) 

з.ризЬ( ) + " = " + епсобеШИСотропепб ( а [ □ ] ) ); 

} 

// возврат результатов сериализации 
гебигп зооіп ("&"); 


Получив последовательную форму наших данных (в виде простой строки), мы может посмотреть, как 
отправить эти данные на сервер, используя СЕТ- или Р05Т-запрос. 

Создание СЕТ-запроса 

Вернемся к созданию НТТР СЕТ-запроса на сервер с использованием ХМичирВедиез!, но на этот раз уже с 
отправкой дополнительных данных, преобразованных в последовательную форму. Простой пример такого запроса 
показан в листинге 10.4. 

Листинг 10.4. Кроссбраузерное средство создания НТТР СЕТ-запроса к серверу (не приспособленное для 
чтения ответных данных) 

// Создание объекта запроса 
ѵаг хші = пем ХМЬНббрКедиезб(); 

// Открытие асинхронного СЕТ-запроса 

хші .ореп("СЕТ", "/зоше/игі . сді?" + зегіа1іге( баба ), бгие); 

// Установка соединения с сервером 
хші .зепб(); 

Важно отметить, что сериализованные данные добавляются к ІІР1 сервера (с использованием в качестве 
разделителя знака вопроса — ?). Все веб-серверы и находящиеся на них веб-приложения знают, что данные, 
включенные после знака вопроса являются последовательным набором пар ключ-значение. Вопрос обработки 
возвращаемого сервером ответа (основанного на переданных ему данных) будет рассмотрен в разделе 
«Обработка ответных данных». 

Создание РОЗТ-запроса 

Другая форма создания НТТР-запроса к серверу, с использованием ХМШНркедиезІ, относится к Р05Т, и в 
ней задействуются совершенно другие способы отправки данных на сервер. Прежде всего Р05Т-запрос способен 
отправлять данные любого формата и любой длины (не ограничиваясь лишь сериализованной строкой данных). 
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При передаче на сервер сериализованный формат, используемый для данных обычно снабжается типом 
содержимого аррІісаііоп/х-ѵѵѵѵ\л/-1огт-игІепсобес1. Это означает, что вы также можете посылать на сервер чистый 
ХМІ. (с типом контента Іехі/хтІ или арріісаііоп/ хті) или даже объект Эа ѵа5сгірі; (используя тип контекста 
аррІіса1;іоп/]50п). 

В листинге 10.5 показан простой пример создания запроса и отправки дополнительных сериализованных 
данных. 

Листинг 10.5. Кроссбраузерное средство создания НТТР РОЗТ-запроса к серверу (не приспособленное для 
чтения ответных данных) 

// Создание объекта запроса 
ѵаг хші = пем ХМЬНббрКедиезб () ; 

// Открытие асинхронного РОЗТ-запроса 
хші .ореп("РОЗТ", "/зоше/игі . сді" , бгие); 

// Отправка заготовка типа контекста (сопбепб-буре), 

// позволяющего серверу узнать, как интерпретировать посланные данные 
хші . зебРедиезбНеабег ( 

"Сопбепб-Туре" , "арріісабіоп/х-мми-богт-игіепсобеб" ) ; 

// Обеспечение отправки правильной длины сериализованных данных — 

// браузеры, основанные на движке Могіііа иногда испытывают с этим 
// проблемы 

іб ( хші . оѵеггісІеМітеТуре ) 

хші. зебРедиезбНеабег ("Соппесбіоп" , "сіозе"); 

// Установка соединения с сервером и отправка сериализованных 
// данных 

хтІ.зепсЦ зегіаііге( баба ) ); 

Чтобы более подробно рассмотреть предыдущее утверждение, обратимся к случаю отправки на сервер 
данных, не приведенных к сериализованному формату. Соответствующий пример показан в листинге 10.6. 

Листинг 10.6. Пример отправки на сервер Р05Т-запроса, содержащего данные в формате ХМІ_ 

// Создание объекта запроса 
ѵаг хші = пем ХМЬНббрКериезб(); 

// Открытие асинхронного РОЗТ-запроса 
хші .ореп("РОЗТ", "/зоше/игі . сді" , бгие); 

// Установка заголовка типа контекста, чтобы сервер знал, 

// как интерпретировать отправляемые ХМЬ-данные 
хші .зебРедиезбНеабег( "Сопбепб-Туре", "бехб/хші"); 

// Обеспечение отправки правильной длины данных — браузеры, 

// основанные на движке Могіііа иногда испытывают с этим проблемы 
іб ( хші . оѵеггібеМішеТуре ) 
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хті. зе'ЬК.еяиез'ЬНеайег ("СоппесЬіоп", "сіозе") ; 

// Установка соединения с сервером и отправка данных 
хшІ.зепсЦ "Сі'ЬетзХі'Ьет ісі= ' опе ' /Хібет ісІ= ' бадо ' /></іЬетз>" ); 

Весьма существенной является возможность посылать большое количество данных (в отличие от СЕТ- 
запроса, предел для которого, в зависимости от браузера, составляет всего пару килобайт, ограничений на 
количество передаваемых данных нет). Это позволяет создавать реализации различных протоколов обмена 
данными, например, ХМІ.-К.РС или 50АР. 

Но, чтобы не усложнять материал, мы ограничимся наиболее распространенными и полезными форматами 
данных, которые делают доступным НТТР ответ. 

НТТР ответ 

Аспектом создания и использования ХМ1ЛирКецие5І:, который ставит его выше всех остальных 
упрощенных форм односторонней связи, является возможность чтения различных текстовых форматов данных, 
посылаемых сервером. Сюда включается и один из краеугольных камней А)ах: ХМІ_ (хотя этим еще не 
утверждается, что при создании Аіах-приложений может быть использован только ХМЬ. Кстати, в разделе 
«Обработка ответных данных» показан ряд других альтернативных форматов). 

Для начала взглянем на листинг 10.7 с очень простым примером обработки данных ответа, полученного от 
сервера. 

Листинг 10.7. Установка соединения с сервером и чтение результирующих данных 

// создание объекта запроса 
ѵаг хші = пем ХМИНЬСрПедиезб(); 

// Открытие асинхронного РОЗТ-запроса 
хші .ореп("СЕТ", "/зоше/игі . сді" , Ьгие); 

// Отслеживание момента обновления статуса документа 
хші .опгеабузбабесЬапде = бипсбіоп (){ 

// Ожидание, пока не завершится загрузка данных 
іб ( хші .геабуЗбабе == 4 ) { 

// хші .гезропзеХМЬ содержит ХМЬ-документ (если таковой был 
// возвращен) 

// хші .гезропзеТехб содержит текст ответа 
// (если не был предоставлен ХМЬ-документ) 

// Подчистка для экономии пространства памяти 
хші = пиіі; 

} 

} ; 


// Установка соединения с сервером 
хші . зепб (); 
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В этом примере можно увидеть, как получать доступ к различным блокам данных, полученных в ответе 
НТТР. Каждое из двух свойств, гезропзеХМЬ и гезропзеТехІ, будет содержать данные, отформатированные 
соответствующим образом. Например, если сервер возвращает ХМІ_-документ, то йОМ-документ будет находиться 
в ге5ропзеХМІ_; любой другой ответ и его результаты будут находиться в гезропзеТехІ. 

Перед тем, как заняться обработкой, перемещением и управлением полученными данными, давайте 
поработаем над более сложной версией функции опгеасіузіаіесііапде (из листинга 10.7), способной обрабатывать 
ошибки сервера и истечение срока соединения. 

Обработка ошибок 

К сожалению, объект ХМШНрРІедиевІ не имеет какого-нибудь встроенного механизма обработки ошибок 
сервера, наличие которого сэкономило бы массу времени. Но вы можете без особого труда создать свой 
собственный механизм. При отправке запроса бывают случаи, требующие отслеживания ситуации для 
определения, столкнулся ли сервер с проблемами при его обработке: 

• Код ответа успешно обработанного запроса: Предполагаемый способ проверки на наличие ошибок 
заключается в отслеживании кода состояния ответа НТТР, который включен в НТТР-спецификацию как 
средство оповещения клиента о том, что делает сервер. Успешным считается такой запрос, чей код 
состояния находится в диапазоне 200. 

• Ответ, не подвергшийся изменениям: Возвращенный сервером документ может иметь пометку «N01 
МосЛТіеФ» (код состояния 304). Это означает, что данные, полученные с сервера, не подверглись 
изменениям, и были загружены не с него, а из персональной кэш-памяти браузера. Поскольку данные по- 
прежнему могут быть считаны клиентом, важно не считать этот ответ за ошибку. 

• Локально размещенные файлы: Если А)ах-приложение запущено на вашем локальном компьютере (без 
участия веб-сервера), код состояния возвращаться не будет, даже если запрос будет успешным. Значит, 
ситуацию, при которой запрос не имеет кода состояния и осуществляется просмотр локального файла 
нужно рассматривать как успешный ответ. 

• Ответ, не подвергшийся изменениям и Забагі: Если документ не подвергся изменениям со времени 
последнего запроса (и если вы не отправляли явным образом серверу заголовок ІР-МСЮІРІЕО-5ШСЕ). Этот 
весьма странный случай может позже помешать процессу отладки. 

Помня об этом, рассмотрим листинг 10.8, в котором представлена реализация проверки ответа, которую я 
ранее уже в общих чертах обрисовал. 

Листинг 10.8. Функция, которая может быть использована для проверки состояния успешности 
полученного с сервера ответа НТТР 

// Проверка, имеет ли объект ХМИНССрКериезб состояние успешности. 

// Функция принимает один аргумент — объект ХМИНССрКериезб 
Типсбіоп ПббрЗиссезз(г) { 

бгу { 

// Если состояние сервера предоставлено не было, и мы фактически 
// сделали запрос к локальному файлу, значит, он прошел успешно 
гебигп Іг.збабиз && Іосабіоп . ргобосоі == "Тііе:" | 

// Нас устраивает любой код состояния в диапазоне 200 
( г.збабиз >= 200 && г.збабиз < 300 ) | 

// Запрос прошел успешно, если документ не подвергся изменениям 
г.збабиз == 304 | | 



210 


// Если файл не подвергался изменениям, Забагі возвращает пустое 
// состояние 

паѵідабог . изегАдепб . іпсіехО^ ( "Забагі" ) >= 0 && 

Еуреоі г.збабиз == "ипбе біпесі" ; 

} сабсЪ. (е) { } 

// Если проверка состояния не удалась, следует предположить, 

// что запрос тоже закончился неудачей 
гебигп баізе; 

} 


Проверка состояния ответа НТТР — шаг очень важный; если его не сделать, можно получить какие-нибудь 
неприятные и весьма непредсказуемые результаты (например, вместо ХМІ_-документа будет возвращена страница 
ошибки НТМІ-). 

В разделе «Полноценный А]ах-пакет» мы встроим функцию в законченное А]'ах-решение. 

Проверка истечения времени запроса 

Еще одной полезной технологией, не включенной в исходную реализацию ХМШИрРедиезІ, является 
определение момента когда время запроса к серверу истекло, и он уже потерял всякий смысл. 

Реализация этого свойства Ітріетепііпд іЫз Геаіиге ізп'І аз сиі-апсі-сігу, Ьиі сіеіегтіпіпд ІИе зиссезг зіаііе оГ 
Ше гедиезі (аг уои сіісі іп ІИе ргеѵіоиз зесііоп) із роззіЫе ѵѵіІИ а ІіШе Ьіі о) 1 ѵѵогк. 

Ызііпд 10-9 5ІПОѴѴ5 Моѵѵ уои ѵѵоиИ до аЬоиі сбескіпд Іог а гециез! Ііте-оиі іп ап арріісаііоп оГ уоиг оѵѵп. 

Листинг 10.9. Пример проверки истечения времени запроса 

// Создание объекта запроса 
ѵаг хші = пем ХМЬНббрКедиезб() ; 

// Открытие асинхронного РОЗТ-запроса 
хші .ореп("СЕТ", "/зоше/игі . сді" , бгие); 

// Мы собираемся дать на ожидание ответа 5 секунд 
ѵаг бітеоибЬепдбЪ. = 5000; 

// Отслеживание успешного выполнения запроса 
ѵаг гедиезбБопе = баізе; 

// Инициализация функции обратного вызова, которая будет запущена через 
// 5 секунд, отменяя запрос (если он не будет к тому времени выполнен) 
зебТітеоиб ( бипсбіоп (){ 
гедиезбБопе = бгие; 

}, бітеоибЬепдбЬ) ; 

// Отслеживание обновления состояния документа 
хші .опгеабузбабесЬапде = бипсбіоп (){ 

// Ожидание, полной загрузки данных. 
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// и проверка, не истекло ли время запроса 
іб ( хші . геасіуЗЬаЬе == 4 && ! гедиезЬБопе ) { 

// хші .гезропзеХМЬ содержит ХМЬ-документ (если он был возвращен) 
// хші .гезропзеТехб содержит текст 
// (если ХМЬ-документ не был предоставлен) 

// Подчистка для экономии пространства памяти 
хші = пиіі; 

} 

} ; 


// Установка соединения с сервером 
хші . зепб (); 

Когда учтены все детали обмена данными с сервером, включая все множество возможных ошибок, 
наступает время обратиться к подробностям обработки ответных данных, полученных с сервера. 

Обработка ответных данных 

Во всех ранее приводимых примерах место для ответных данных, полученных с сервера пустовало по той 
простой причине, что существует поистине бесчисленное множество всевозможных форматов данных, которые 
могут быть возвращены сервером. Но на самом деле ХМЬННрРециез): работает только с форматами данных, 
имеющими текстовую основу. Но даже при этом с некоторыми из них он работает лучше (с ХМЬ), чем с другими (с 
150ІМ). В этой главе мы собираемся рассмотреть три различных формата данных, которые могут быть возвращены 
сервером, а затем считаны и обработаны клиентом: 

• Хорошо, что все современные браузеры изначально обеспечивают обработку ХМЬ-документов, 
автоматически превращая их в полезные ЭОМ-документы. 

• НТМІ Этот формат отличается от ХМЬ-документа тем, что обычно представляет собой простую текстовую 
строку, содержащую фрагмент НТМЬ-кода. 

• ЗаѵаЗсгірі/ЗЗОЫ-. Он охватывает два формата данных — простой, исполняемый код Эа ѵаЗсгірі:, и 
представление объекта ІаѵаЗсгірі — 150Ы (Эа ѵаЗсгірі: ОЬц'ес! ІМоІаііоп). 

У каждого из этих форматов данных есть различные случаи применения, в которых они могут быть 
особенно полезны. К примеру, существует масса примеров, когда имеет больше смысла вместо ХМЬ-документа 
возвращать фрагменты кода НТМІ_. Важный аспект извлечения данных из ответа НТТР заключается в двух 
свойствах объекта ХИШНрРеццезі: 

• гезропзеХМЬ. Это свойство будет содержать ссылку на заранее сгенерированный ЭОМ-документ 
(представляющий документ ХМЬ) если с сервера был возвращен ХМЬ-документ. Это случается только если 
сервер явным образом указал в заголовке контента «СопЬепЬ-Ьуре: іехі/хті», или подобный этому тип 
данных ХМЬ. 

• гезропзеТехі: Это свойство содержит ссылку на простую текстовую строку возвращенных сервером 
данных. На этот метод для доступа к своим данным полагаются два типа данных: НТМІ_ и ІаѵаЗсгірІ:. 

Имея в распоряжении эти два свойства, можно без особого труда создать универсальную функцию для 
детерминированного извлечения данных из ответа НТТР (и даже определить с чем вы имеете дело, с ХМЬ-ответом 
или с обычным текстом). В листинге 10.10 показана функция, которую можно использовать именно в этом 


качестве. 
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Листинг 10.10. Функция, предназначенная для извлечения правильных данных из ответа НТТР-сервера 

// Функция для извлечения данных из ответа НТТР 

// Она принимает два аргумента, объект ХМЬНббрКеяиезб и 

// необязательный аргумент - тип данных, ожидаемых с сервера 

// Приемлемы следующие значения: хші, зсгірб, бехб или Ьбті — по 

// умолчанию — что устанавливает тип данных на основе заголовка 

// сопбепб-буре 

бипсбіоп ЬббрБаба(г, буре) { 

// Получение заголовка сопбепб-буре 

ѵаг сб = г.дебКезропзеНеабег("сопбепб-буре") ; 

// Если не предоставлен тип по умолчанию, определение 
// не возвращена ли с сервера какая-либо форма ХМЬ 
ѵаг баба = !буре && сб && сб . іпбехОб ( "хгпі" ) >= 0; 

// Получение объекта ХМЬ-документа, если сервер вернул ХМЬ, 

// если нет — возвращение полученного с сервера текстового содержимого 
баба = буре == "хші" || баба ? г.гезропзеХМЬ : г.гезропзеТехб; 

// Если указан тип "зсгірб", выполнение возвращенного текста, 

// реагируя на него, как на баѵаЗсгірб 
іб ( буре == "зсгірб" ) 

еѵа1.са11( міпбом, баба ); 

// Возвращение данных, полученных в ответе (или ХМЬ-документа, или 
// текстовой строки) 
гебигп баба; 

} 


Теперь, располагая этой функцией извлечения данных, у нас имеются все компоненты, необходимые для 
построения законченной функции, создающей обычный Аіах-вызов данных с сервера. Полная реализация 
функции показана в следующем разделе. 

Полноценный Аіах-пакет 

Используя все изученные до сих пор понятия, можно создать универсальную функцию для обработки всех 
А]ах-запросов и связанных с ними ответов. В основном эта функция станет в будущих главах фундаментом для 
нашей А]ах-разработки, позволяющей осуществлять быстрые запросы к серверу для получения дополнительной 
информации. 

Законченная А]ах-функция показана в листинге 10.11. 

Листинг 10.11. Законченная функция, способная осуществлять необходимые задачи, связанные с 
использованием А]'ах 

// Универсальная функция, предназначенная для осуществления А^ах-запросов 
// Она принимает один аргумент, представляющий собой объект, содержащий 
// набор параметров, каждый из которых имеет краткое описание в последующих 
// комментариях 
бипсбіоп а^аx( орбіопз ) { 
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// Загрузка объекта параметров по умолчанию, если пользователем не 
// представлено никаких значений 
орбіопз = { 

// Тип Ьббр-запроса 

буре: орбіопз. буре || "Р08Т", 

// ІЖЬ на который должен быть послан запрос 
игі : орбіопз.игі || 

// Время ожидания ответа на запрос 
бішеоиб: орбіопз . бішеоиб || 5000, 

// Функция, вызываемая, когда запрос неудачен, успешен 
// или завершен (успешно или нет) 
опСошрІебе: орбіопз . опСошрІебе || бипсбіоп (){}, 
опЕггог: орбіопз .опЕггог | | бипсбіоп (){}, 
опЗиссезз: орбіопз .опЗиссезз | | бипсбіоп (){}, 

// Тип данных которые будут возвращены с сервера 
// по умолчанию просто определить, какие данные были 
// возвращены, и действовать соответственно, 
баба: орбіопз. баба || "" 


// Создание объекта запроса 
ѵаг хші = пем ХМЬНббрВедиезб(); 

// Открытие асинхронного запроса 

хші .ореп (орбіопз .буре, орбіопз.игі, бгие); 

// Ожидание отклика на запрос в течение 5 секунд 
// перед тем, как от него отказаться 
ѵаг бішеоибЬепдбЬ = орбіопз . бішеоиб; 

// Отслеживание факта успешного завершения запроса 
ѵаг гедиезбБопе = баізе; 

// Инициализация функции обратного вызова, которая будет запущена через 
// 5 секунд, отменяя запрос (если он не будет к тому времени выполнен) 
зебТішеоиб ( бипсбіоп (){ 
гериезбБопе = бгие; 

}, бітеоибЬепдбЬ) ; 

// Отслеживание обновления состояния документа 
хші .опгеабузбабесЬапде = бипсбіоп (){ 

// Ожидание, полной загрузки данных, 

// и проверка, не истекло ли время запроса 
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іі ( хші. геабуЗбабе == 4 && ! гедиезбОопе ) { 

// Проверка успешности запроса 
іі ( ПббрЗиссезз( хші ) ) { 

// Выполнение в случае успеха функции обратного вызова 

// с данными, возвращенными с сервера 

орбіопз .опЗиссезз ( ПббрБаба( хші, орбіопз. буре ) ); 

// В противном случае произошла ошибка, поэтому нужно 
// выполнить функцию обратного вызова для обработки ошибки 
} еізе { 

орбіопз .опЕггог(); 

} 

// Выполнение функции обратного вызова, связанной с завершением 
// запроса 

орбіопз . опСотрІебе (); 

// Подчистка для экономии пространства памяти 
хші = пиіі; 

} 

} ; 


// Установка соединения с сервером 
хші .зепб(); 

// Определение успешности получения ответа НТТР 
іипсбіоп ПббрЗиссезз(г) { 

бгу { 

// Если состояние сервера предоставлено не было, и мы 
// фактически сделали запрос к локальному файлу, 

// значит, он прошел успешно 

гебигп Іг.збабиз && іосабіоп . ргобосоі == "іііе:" | 

// Нас устраивает любой код состояния в диапазоне 200 
( г.збабиз >= 200 && г.збабиз < 300 ) | 

// Запрос прошел успешно, если документ не подвергся 
// изменениям 
г.збабиз ==304 | 

// Если файл не подвергался изменениям, Заіагі возвращает 
// пустое состояние 

паѵідабог . изегАдепб . іпсіехОі ( "Заіагі" ) >= 0 

&& буреоі г.збабиз == "ипсіеііпесі"; 


} сабсН(е) { } 
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// Если проверка состояния не удалась, следует предположить, 

// что запрос тоже закончился неудачей 
гебигп баізе; 

} 

// Извлечение правильных данных из ответа НТТР 
бипсбіоп ЬббрОаба (г, буре) { 

// Получение заголовка сопбепб-буре 

ѵаг сП = г. дебКезропзеНеабег ("сопбепб-буре") ; 

// Если не предоставлен тип по умолчанию, определение 
// не возвращена ли с сервера какая-либо форма ХМЬ 
ѵаг баба = !буре && сб && сб. іпбехОб ( "хті" ) >= 0; 

// Получение объекта ХМЬ-документа, если сервер вернул ХМЬ, 

// если нет — возвращение полученного с сервера текстового 
// содержимого 

баба = буре == "хші" || баба ? г.гезропзеХМЬ : г.гезропзеТехб; 

// Если указан тип "зсгірб", выполнение возвращенного текста, 

// реагируя на него, как на баѵаЗсгірб 
іб ( буре == "зсгірб" ) 

еѵа1.са11( иіпбои, баба ); 

// Возвращение данных, полученных в ответе (или ХМЬ-документа, или 
// текстовой строки) 
гебигп баба; 

} 

} 


Важно отметить, что запрос страниц, которые находятся не в том же домене, что и страница, с которой 
производится запрос, невозможно. Это обусловлено ограничениями, налагаемыми из соображений безопасности 
всеми современными браузерами (чтобы пресечь попытки кражи вашей персональной информации). Теперь, когда 
мы располагаем столь мощной функцией, настало время проработать несколько примеров, демонстрирующих 
новоприобретенную силу А)ах. 

Примеры различного использования данных 

По сути ситуации создания простых А)ах-запросов мало отличаются друг от друга, но, что действительно 
изменяется, так это данные, которые сервер посылает в ответ. В зависимости от цели, которую вы пытаетесь 
достичь, наличие различных форматов данных может сталь очень полезным обстоятельством. Именно по этому я и 
собираюсь вам показать, как выполняются некоторые стандартные задачи с применением ряда различных 
форматов. 

^55-поток, основанный на формате ХМЬ 

Несомненно наиболее популярным форматом для возвращаемых сервером данных является ХМЬ, и для 
этой популярности есть весьма серьезные основания. Все современные браузеры обладают своей собственной 
поддержкой ХМЬ-документов, конвертируя их на лету в ООМ-представление. Поскольку всю тяжелую работу по 
синтаксическому разбору берет на себя браузер, все, что остается сделать — пройтись по нему, как по любому 
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другому йОМ-документу. При этом важно отметить, что перемещаться по восстановленному из удаленного 
источника ХМІ_-документу с помощью функции деІЕІетепІВуІсі в принципе невозможно. Просто потому, что 
обычные не-НТМІ_ ХМІ_-документы не имеют у себя предварительно запрограммированного уникального атрибута 
Ю. Но не смотря на сказанное, все же способ эффективного перемещения по ХМЬ-документам есть. 

В листинге показан простой пример использования возвращенного ХМІ_ для создания на веб-сайте 
элемента отображения В5Б-потока. 

Листинг 10.12. Загрузка заголовков новостей, содержащихся в удаленном В55-потоке, основанном на 
формате ХМІ_ 


<Ьбт 1 > 

<ЬеасІ> 

<Сі1;1е> Динамический элемент отображения К.38-потока</бі'Ые> 

<!—загрузка нашей универсальной А^ах-функции --> 

<зсгірб згс="аз ах .3 з"></ зсгірО 
<зсгірб> 

// Ожидание полной загрузки документа 
иіпсіом . опіоасі = Дипсбіоп () { 

//И загрузка КЗЗ-потока с использованием Азах 

а^ах({ 

// ГОЬ КЗЗ-потока 
игі : "гзз.хші", 

// Это ХМЬ-документ 
буре: "хші", 

// Эта функция будет выполнена, когда запрос будет завершен 
опЗиссезз: Дипсбіоп ( гзз ) { 

// Все заголовки у которых ісі равны "Деесі", 

// мы собираемся поместить в теги <о 1 > 
ѵаг Дееб = босишепб . дебЕІешепбВуІсі (" Дееб" ) ; 

// Использование всех заголовков К.ЗЗ ХМЬ-документа 
ѵаг бібіез = гзз. дебЕІешепбзВуТадИаше ( "бібіе" ); 

// последовательный перебор всех соответствующих 
// заголовков новостей 

Дог ( ѵаг і = 0 ; і < бібіез . ІепдбЬ; і++ ) { 

// Создание <1і>-элемента для размещения заголовка 
// новости 

ѵаг 1і = босшпепб .сгеабеЕІешепб("1і") ; 

// Установка содержимого заголовка в элемент 
Іі.іппегНТМЬ = бібіез [і] . ДігзбСЬіІсІ.посІеѴаІие; 

// и добавление его в БОМ, в <оі>-элемент 
Дееб. аррепбСЬіІсі ( 1і ); 
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} 

} 

}) ; 

} ; 

</ зсгірб> 

</НеасІ> 

<ЪосІу> 

<Ы> Динамический элемент отображения К35-потока</Ы> 

<р>Ознакомление с КЗЗ-потоком:</р> 

<!-- Именно сюда мы собираемся вставить КЗЗ-поток --> 

<о1 ісі=" Дееб"Х/о1> 

</Ьобу> 

</Ьбш1> 

Как видите, после того, как все сложности, связанные с А]ах-процессом запроса-ответа перемещены в 
другое место, для решения этой задачи особых усилий прикладывать не пришлось. Кроме того, поскольку 
браузеры существенно упростили проход по ХМІ_-документу, этот способ действительно стал великолепным 
средством быстрой передачи данных от сервера к клиенту. 

Вставка НТМІ_ 

Еще одной технологией, которая может быть выполнена с использованием А]ах является загрузка в 
документ НТМІ_-фрагментов. Эта технология отличается от только что рассмотренной методики работы с ХМІ_- 
документом тем, что для нее не требуется проводить синтаксический разбор или осуществлять проход по данным, 
получаемым с сервера; она используется только для вставки этих данных в документ. Использование этого 
метода — действительно быстрый и впечатляющий способ простого и немедленного получения обновления вашей 
веб-страницы. Пример использования этого метода показан в листинге 10.13. 

Листинг 10.13. Загрузка НТМІ_-фрагмента из удаленного файла и вставка его в текущую веб-страницу 


<Нбт1> 

<НеасІ> 

<ЬіЫе> Спортивный счет в формате НТМЬ, загруженный Азах </ЫЫе> 

<!-- Загрузка нашей универсальной Азах-функции --> 

<зсгірб згс="аз ах.з з"></ зсгірО 

<5СГІрб> 

// Ожидание полной загрузки документа 
иіпсіом . опіоаб = бипсбіоп () { 

// Затем загрузка спортивного счета с использованием А^аx 

а^ах({ 

// ІЖЬ, где находятся спортивный счет в формате НТМЬ 
игі : "зсогез. ЬЬтІ" , 

// Это НТМЬ-документ 
буре: "Ьбті", 

// Эта функция будет выполнена, когда запрос будет завершен 
опЗиссезз: бипсбіоп ( Нбші ) { 

// Мы собираемся вставить НТМЬ в біѵ-элемент, 

// значение і<3 которого равно ' зсогез ' 
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ѵаг зсогез = йосшпепб . дебЕІетепбВуІсІ ("зсогез") ; 

// Вставка нового НТМЬ в документ 
зсогез.іппегНТМЬ = Нбті; 

} 

}) ; 

} ; 

</зсгірО 
</ЬеасІ> 

<ЪосІу> 

<Ы> Спортивный счет в формате НТМЬ, загруженный с помощью А^ ах </Ы> 

<!-- Сюда будет вставлен спортивный счет --> 

<сііѵ іс1="зсогез"></сІіѵ> 

</ЪосІу> 

</Ьбт1> 

Наиболее важный аспект динамической НТМЬ-технологии заключается в том, что вы по-прежнему можете 
хранить все шаблоны уровня приложения в коде на стороне сервера, что позволяет централизованно содержать и 
без проблем обслуживать весь базовый код шаблонов. 

Простоту загрузки обычных НТМЬ-файлов трудно переоценить, поскольку она предоставляет самый легкий 
способ придать веб-приложению лучшую отзывчивость на действия пользователя. 

.ІЗСШ и ІаѵаЗсгірІ: Удаленное выполнение 

В заключение я собираюсь рассмотреть формат данных (один из тех, к которому мы еще вернемся в 
главе 13, при изучении ѵѵікі), который относится к передаче строк данных 150И и простого кода ІаѵаБсгірІ:. 
Передача сериализированных ІБОИ-данных может служить облегченной альтернативой передаче ХМЬ-документов 
от сервера к клиенту. Кроме того, предоставление сервером простого кода ІаѵаБсгірі служит превосходным 
способом построения динамических многопользовательских приложений. Чтобы ничего не усложнять, давайте 
рассмотрим удаленную загрузку в приложение файла ІаѵаБсгірІ, показанную в листинге 10.14. 

Листинг 10.14. Динамическая загрузка и исполнение удаленного ІаѵаБсгірІ-файла 


<ЬЬт1> 

<Ьеа<3> 

<!-- Загрузка нашей универсальной А^аx-функции --> 

<зсгірб з^с="а^ ах. ^ з"></ зсгірО 
<зсгірб> 

// Загрузка удаленного ЦаѵаЗсгірЬ-файла 
а^ ах ({ 

// ІЖЬ ЦаѵаЗсгірЬ-файла 
игі : "шузсгірб .^з", 

// Принуждение его к выполнению в качестве кода ЦаѵаЗсгірІ: 
буре: "зсгірб" 

}) ; 

</ зсгірО 
</ЬеасІ> 

<Ьо<ЗуХ/Ьо<Зу> 
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</Ы:ш1> 

Вывод 

При всей своей обманчивой простоте, концепция веб-приложений А]ах обладает большими 
возможностями. Динамическая загрузка дополнительных информационных частей в уже запущенное приложение, 
использующее ^ѵаЗсгірі, позволяет создавать более отзывчивый интерфейс, способный порадовать 
пользователей. 

В этой главе мы на изучили основных концепций работы А]ах, включая особенности Мир-запроса и ответа, 
обработку ошибок, форматирование данных и их синтаксический разбор. В результате этого была разработана 
универсальная функция, которую можно многократно использовать для упрощения работы по приданию большей 
динамичности любому веб-приложению. Эта функция будет использована в следующих трех главах для создания 
динамичных элементов взаимодействия, основанных на технологии А]ах. 
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Глава 11 Усовершенствование блогов с помощью Азах 

Одной из возможностей, предоставляемой технологией А)ах, является предоставление дополнительных 
уровней взаимодействия с пользователями при работе со статическими веб-страницами. Это означает, что вы 
можете приступать к изменениям характера работы статической веб-страницы, не нарушая целостности 
пользовательского представления. 

Одна из областей, которую можно усовершенствовать — это сетевые журналы, или блоги. Если взглянуть 
на него с точки зрения данных, то блог — это ничто иное, как перечень статей, в котором есть текстовая статья, 
заголовок и ссылка на полную версию статьи. Но средства просмотра старых статей и проверки наличия новых 
оставляют желать лучшего. 

В этой главе мы рассмотрим два разных способа улучшения типичного блога за счет применения кода 
ІаѵаЗсгірі, в котором используется технология А)ах. Один из них представляет собой средство простой прокрутки 
большого перечня статей без оставления текущей страницы, а другой — способ отслеживания новых статей блога 
без непрерывной перезагрузки веб-страницы. 

Бесконечный блог 

Первым усовершенствованием, которое мы собираемся применить к блогу — возможность осуществления 
обратной прокрутки архивов без каких-либо щелчков на ссылках переходов. Общей особенностью блогов, или 
иных веб-сайтов, содержимое которых имеет хронологический характер, является возможность перехода к более 
ранним статьям. Зачастую она предоставляется за счет ссылок Следующая и (или) Предыдущая в нижней части 
страницы, которые позволяют пользователю перемещаться по архивным статьям. 

Мы будем исследовать способ, при котором весь этот процесс будет проведен с помощью А)ах. Чтобы 
создать утилиту, способную выполнить эту задачу, нужно сделать несколько допущений: 

• У нас есть веб-страница с серией публикаций, изложенных в хронологическом порядке. 

• Когда пользователь приближается к концу страницы, у него возникает желание прочитать предыдущие 

публикации. 

• У нас есть источник данных, из которого можно брать публикации. В данном случае мы собираемся 

воспользоваться ѴѴогсіРгезз, программным обеспечением для создания блогов (МЕІір://ѵѵогсірге55.огд/), 

которое хорошо справляется с этой задачей. 

Тогда замыслом нашего сценария будет автоматическая подгрузка дополнительных публикаций как только 
пользователь прокрутит изображение ближе к нижней части страницы, что позволит ему продолжить прокрутку и 
перемещаться по архиву, при этом возникнет иллюзия бесконечной веб-страницы. Этот сценарий будет создан с 
использованием функциональных возможностей программного обеспечения ѴѴогбРгезз, предназначенного для 
создания блогов. У вас появится возможность включить этот сценарий и в свой собственный блог, построенный на 
основе \Л/огбРге55, придав ему дополнительные функциональные возможности. 

Шаблон блога 

Сначала мы собираемся воспользоваться основным шаблоном, предоставляемым по умолчанию при 
установке ѴѴогс1Рге55. Обычно этот шаблон называется КиЬгік, и пользуется немалой популярностью. На рис. 11.1 
показан пример обычной страницы, использующей тему КиЬгік. 
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Рис. 11.1. Пример темы КиЬгік, используемой в ѴѴогсіРге55 по умолчанию 

Как видно из иллюстрации, у страницы есть основной столбец, заголовок и боковая панель. Самой главной 
областью является заголовок; именно в нем идет поиск публикаций и добавление новой информации. Рассмотрим 
приведенную в листинге 11.1 упрощенную версию НТМЦ используемую в качестве структуры этого блога. 

Листинг 11.1. Упрощенная версия НТМІ_, сгенерированного темой КиЬгік и ѴѴогсіРге55 


<Ьбт1> 

<ЬеасІ> 

<Ы'Ые>Бесконечный Ѵ\?огсІргезз</ЬіЫе> 

<5СГІрЬ> 

<!-- Сюда будет помещен наш сценарий --> 
</ зсгірО 
</ЬеасІ> 

<ЪосІу> 

<сііѵ ісі="раде"> 

<сііѵ ісІ="ЬеасІег"> 

<!—Содержимое заголовка --> 

</біѵ> 

<сііѵ ісі="сопбепб"> 

<!-- Первая публикация --> 

<біѵ с1азз="розб"> 

<!-- Заголовок публикации --> 
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<Ь2Ха Ьгеі=" /безб/?р=1 ">Тестовая публикация</аХ/Ь2> 

<зта11>24 октября 2006 года</зша11> 

<сііѵ с1азз="епбгу"> 

<!-- Содержимое публикации --> 

</біѵ> 

<р с1азз="розбтебасІаба"> 

<а ЬгеД="/безб/?р=1#соттепбз">Комментарии</а></р> 

</біѵ> 

<!-- Другие публикации ... --> 

</біѵ> 

</біѵ> 

</Ъобу> 

</Ьбт1> 

Следует заметить, что все публикации блога помещены в <біѵ>-контейнеры с Ю, значение которого равно 
«сопіепі». Кроме этого, каждая публикация обладает специфическим форматом, который придает ей 
определенную структуру. С расчетом на это нужно создать простой набор ООМ-функций, которые можно будет 
выполнить для получения некоторых данных и внедрения их на страницу блога. В листинге 11.2 показаны ООМ- 
операции, необходимые для завершения страницы. 

Листинг 11.2. Операции ЭОМ для добавления НТМб, необходимого для завершения страницы 

// Загрузка новых публикаций производится в <сІіѵ>-контейнер с ІБ, значение 
// которого равно "сопбепб" 

ѵаг сопбепб = босшпепб . дебЕІешепбВуІсІ ("сопбепб") ; 

// Мы собираемся осуществить последовательный перебор всех публикаций 
// в КЗЗ-потоке 

ѵаг ібешз = гзз. дебЕІешепбзВуТадЛаше ( "ібеш" ); 

Дог ( ѵаг і = 0; і < ібешз.ІепдбЬ; і++ ) { 

// Извлечение ссылки, заголовка и описательных данных из каждого 
// элемента потока, относящегося к публикации 
ѵаг баба = дебБаба( ібешз[і] ); 

// Создание нового <біѵ>-контейнера для хранения публикации 
ѵаг біѵ = босшпепб. сгеабеЕІешепб ( "біѵ" ); 
біѵ . сіаззИаше = "розб"; 

// Создание заголовка публикации 
ѵаг Ь 2 = босшпепб.сгеабеЕІешепб("Ь2"); 

// Здесь содержится заголовок элемента потока и имеется ссылка, 

// указывающая на публикацию. 

Ь2.іппегНТМБ = "<а Ьгеб='" + баба.ііпк + + баба.бібіе + "</а>"; 
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// Добавление этого содержимого к <сІіѵ>-контейнеру публикации 
сііѵ . аррепбСЬіІб ( Ь2 ); 

// Теперь создадим <сііѵ>, в котором будет содержаться публикация 
ѵаг епбгу = босишепб . сгеабеЕІешепб ( "сііѵ" ) ; 
епбгу. сІаззЛате = "епбгу"; 

// Добавим в <біѵ> содержимое публикации 
епбгу. іппегНТМЬ = баба.безе; 
біѵ . аррепбСЬіІб ( епбгу ); 

// В завершение добавим нижнюю часть, содержащую ссылку возврата 
ѵаг теба = босишепб. сгеабеЕІешепб ("р"); 
теба. сІаззЛате = "розбшебабаба"; 

ѵаг а = босишепб. сгеабеЕІешепб ("а"); 
а.Ьгеб = баба.ііпк + "#сошшепбз"; 
а.ІппегНТМЬ = "Комментарий"; 
шеба. аррепбСЬіІб ( а ); 

біѵ . аррепбСЬіІб ( шеба ); 

// Помещение новой публикации в документ 
сопбепб. аррепбСЬіІб ( біѵ ); 


} 


Но все эти ООМ-операции мало что значат, если вы не знаете, с какими данными имеете дело. В 
следующем разделе мы рассмотрим данные, которые будут переданы нам с сервера, и как их можно будет 
вставить в документ, используя ООМ-операции. 

Источник данных 

ѴѴогбРгезз предоставляет простые средства доступа к данным публикаций. Все блоги ѴѴогс1Рге55 включают 
исходный Р55-ПОТОК, который можно использовать для просмотра десяти наиболее свежих публикаций. Но только 
этого одного будет не достаточно, нам нужен доступ ко всем публикациям, для чего следует вернуться к самому 
началу веб-сайта. К счастью, именно для этого имеется одно скрытое свойство, которым можно воспользоваться. 

1Ж1_ для Р55-потока обычно выглядит в ѴѴогбРгезв следующим образом: /Ыод/ ?Гееб = г55; но если к нему 
добавить дополнительный параметр, /Ыод/?Гееб = г55&радеб = 1М, то можно углубиться в исторические данные блога 
(с N равным 1 отображаются десять самых последних публикаций, с 2 — десять предыдущих, и т. д.). В листинге 
11.2 показан пример того, как выглядит Р55-поток, содержащий данные публикаций. 

Листинг 11.3. ХМб Р55-ПОТОК, возвращаемый ѴѴогбРгевз, который содержит десять публикаций в четко 
отформатированной структуре 

<?хш1 ѵегзіоп=" 1.О" епсобіпд="иТП-8"?> 

<гзз ѵегзіоп="2 .0"> 
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<сЬаппе1> 

<бі'Ые>Тез'Ь Могбргезз ИеЬ 1од</бі'Ые> 

<1іпк>Ы:1:р: //зошеигі. сот/ без1:/</1іпк> 

<сіезсгір1;іоп>Тез'Ь КеЪ Іод.</безсгір1;іоп> 

<риЪБабе>Егі, 08 ОсЬ 2006 02:50:23 +0000</риЬБа1;е> 

<депега , Ьог>]і'Ь'Ьр: / /могбргезз . огд/?ѵ=2.0</депегабог> 

<1апдиаде>еп</1апдиаде> 

<іРеш> 

<бі'Ые>Тез'Ь Розб</'Ы'Ые> 

<1іпк>Ы;1;р: //зошеигі. сот/ ?р=9</ 1іпк> 

<риЬБа'Ье>Т1іи, 07 Зер 2006 09:58:07 +0000</риЬБа'Ье> 

<бс : сгеабог^окп Везід</ бс : сгеабог> 

<сабедогу>ипсабедогІ 2 еб</ сабедогу> 

<безсгір1;іоп><! [СБАТА [Сюда помещается содержимое публикации ...]] > 

</ безсгір1;іоп> 

</ібеш> 

<!-- Множество других публикаций --> 

</сЬаппе1> 

</гзз> 


Благодаря подключению к В55-потоку вы получаете четко отформатированный ХМБ-файл, с которым 
можно работать (и по которому очень удобно перемещаться с помощью ЗаѵаЗсгірІ;). В листинге 11.4показан код, 
необходимый для прохода по И55 ХМБ-документу и извлечения из него всей важной информации. 

Листинг 11.4. Извлечение информации о публикации из ХМІ_ К55-потока 

// Мы собираемся осуществить последовательный перебор всех публикаций, 

// имеющихся в КЗЗ-потоке 

ѵаг ібешз = гзз. деСЕІешепСзВуТадЛаше ( "ібеш" ); 

Тог ( ѵаг і = 0; і < ібешз. Іепдбіт; і++ ) { 

// Извлечение из <ібеш>-элемента КЗЗ-потока заголовка, описания 
// и ссылки 

ѵаг бібіе = еіеш.дебЕІешепбзВуТадИаше ("бібіе") [0] . ТігзбСЫІб.побеѴаІие; 
ѵаг безе = 

еіеш.дебЕІешепбзВуТадИаше("безегірбіоп")[0].ТігзбСЬіІб.побеѴаІие; 
ѵаг Ііпк = еіеш. дебЕІешепбзВуТадИате ("Ііпк" ) [0].ТігзбСЬіІб.побеѴаІие; 

} 


Теперь, когда у нас есть цельный источник данных и четкая структура для вставки результатов в НТМБ- 
документ, настало время склеить все вместе с помощью Аіах-запроса и определения наступления некоторых 
основных событий. 


Определение наступления событий 
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Основным действием, которое пользователь должен совершить для активации нашего сценария, будет 
простая прокрутка ближе к концу страницы. При каждом смещении области просмотра браузера нам нужно 
проверять, не приблизилось ли оно к нижней части страницы. 

Сценарий управления этим процессом относительно прост; нужно лишь привязать отдельный обработчик 
события к событию прокрутки окна. Тогда будет известно о каждом случае перемещения пользователем окна 
просмотра по странице (что может происходить и возле нижней части окна). Все, что нужно будет сделать 
сводится к применению нескольких методов, показанных в главе 7 с целью определения, где именно находится 
пользовательская область просмотра относительно страницы: радеНеідИІ; (для определения высоты всей 
страницы), зсгоІІУ (для определения текущего положения, до которого прокручена вершина области просмотра), и 
ѵѵіпсІоѵѵНеід Ы: (для определения высоты области просмотра). Все они показаны в листинге 11.5. 

Листинг 11.5. Определение положения пользовательской области просмотра 

// Мы собираемся определить, не пора ли подгружать дополнительное 
// содержимое в зависимости от того, где на странице находится 
// пользовательская область просмотра 
міпсіои . ОП5СГОІ1 = бипсбіоп (){ 

// Проверка положения области просмотра на странице 
іб ( сигРаде >= 1 && ! Іоабіпд && 

радеНеідббО -зсгоІІУ () -міпбоиНеідПб () < міпбовдНеідПб () ) { 

// Запрос К.85 ХМЬ-потока с использованием Азах 

} 

} ; 


Теперь у нас есть все необходимые компоненты, осталось только добавить А)ах-запрос, чтобы извлечь 
данные, необходимые для того, чтобы все как следует заработало. 

Запрос 

Ядро всего приложения связано с использованием Аіах-запросов для динамической загрузки новых блоков 
публикаций, которые затем можно будет вставлять в страницу. Нужный нам запрос довольно прост: отправляем 
на определенный ІЖб (указывающий на следующий блок публикаций) НТТР СЕТ-запрос и извлекаем находящийся 
там ХМІ_-документ. Именно это и делает код, показанный в листинге 11.6, в котором используется полноценная 
А)ах-функция (из главы 10). 

Листинг 11.6. А)ах-запрос для загрузки нового блока публикаций 

// Загрузка публикаций с использованием доступной нам функции азах() 
а^ах ({ 

// Мы запрашиваем простую веб-страницу, поэтому используем СЕТ 
буре: "СЕТ", 

// Ожидается КЗЗ-поток, представленный ХМЬ-файлом 
баба: "хші", 

// Получение РЗЗ-потока 11-ной страницы. При первоначальной загрузке 
// нашей страницы мы находимся на странице '1', поэтому при переходе 
// к предыдущему периоду времени мы начинаем со страницы 2 
игі : "./?бееб=гзз&радеб=" + ( ++сигРаде ), 
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// Отслеживание успешного завершения извлечения П83-потока 
опЗиссезз: іипсбіоп ( гзз ){ 

// Проход по КЗЗ ХМЬ-документу, используя его БОМ 

} 


Теперь после создания механизма составления запроса страницы, следует связать все вместе в единый 
пакет, который без особого труда можно будет поместить непосредственно в ваш ѴѴогсіРгевв-блог. 

Результат 

Объединение кода построения ЭОМ с кодом прохода по К.55 ХМІ_, наверное, самая простая часть этого 
приложения, но при объединении с определителем события прокрутки и А]ах-запросом, вы получаете все 
компоненты, необходимые для привлекательного дополнения вашего блога — возможность непрерывной 
прокрутки по всем публикациям блога не покидая при этом страницу. В листинге 11.7 показан полный код, 
необходимый для усовершенствования блога ѴѴогс1Рге55 путем добавления этих функциональных возможностей. 

Листинг 11.7. Код ІаѵаБсгірІ;, необходимый для предоставления блогу ѴѴогсІРге55 возможностей 
бесконечной страницы 

// Отслеживание на какой "странице" содержимого мы находимся в данный момент 
ѵаг сигРаде = 1; 

// Предотвращение двойной загрузки страницы за один сеанс работы 
ѵаг Іоасііпд = іаізе; 

// Отслеживание необходимости загрузки дополнительного содержимого в 

// зависимости от того места страницы, которое просматривается 

// пользователем 

міпсіои . опзсгоіі = іипсбіоп () { 

// Перед загрузкой дополнительного содержимого нужно проверить 
// 1) Что мы не на последней странице содержимого. 

// 2) Что мы только что уже не загружали каких-нибудь новых 
// публикаций. 

// 3) Что мы собираемся загружать только новые для нас публикации, 

// прокрутка достигла нижней части страницы 

іб ( сигРаде >= 1 && ! Іоасііпд 

&& радеНеідііб () -зсгоІІУО -міпбомНеідЫ: () < міпсіоиНеідЫ: () ) { 

// Запоминание того, что мы приступили к загрузке новых публикаций. 

Іоасііпд = бгие; 

// Загрузка публикаций, с использованием доступной нам 
// функции а^аx() 
аІ ах ({ 


// Мы запрашиваем простую веб-страницу, поэтому используем СЕТ 
буре: "СЕТ", 
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// Ожидается РЗЗ-поток, представленный ХМЬ-файлом 
баба: "хші", 

// Получение РЗЗ-потока И-ной страницы. При первоначальной 
// загрузке нашей страницы мы находимся на странице ' 1' , 

// поэтому при переходе к предыдущему периоду времени мы 
// начинаем со страницы 2 

игі : "./?бееб=гзз&радеб=" + ( ++сигРаде ), 

// Отслеживание успешного завершения извлечения РЗЗ-потока 
опЗиссезз: бипсбіоп ( гзз ){ 

// Загрузка новых публикаций в <сііѵ>, 

// у которого ІБ имеет значение "сопбепб" 

ѵаг сопбепб = босшпепб . дебЕІешепбВуІсі ("сопбепб") ; 

// Мы собираемся осуществить последовательный перебор 
// всех публикаций, имеющихся в КЗЗ-потоке 
ѵаг ібешз = гзз. дебЕІешепбзВуТадМаше ( "ібеш" ); 
іог ( ѵаг і = 0; і < ібешз.ІепдбП; і++ ) { 

// помещение новой публикации в документ 
сопбепб . аррепсІСНіІсІ ( шакеРозб ( ібешз[і] ) ); 

} 

// Если из ХМЬ-документа уже больше нечего извлекать, 
// мы должны вернуться назад, насколько это возможно 
іі: ( ібешз. ІепдбЬ. == 0 ) { 

сигРаде = 0; 

} 

}, 

// Как только запрос будет завершен, можно будет 
// снова осуществить попытку загрузки новых публикаций 
опСошрІебе: Бипсбіоп(){ 

Іоабіпд = іаізе; 

} 

}) ; 

} 

} ; 


// Функция, предназначенная для создания полной БОМ-структуры отдельной 
// публикации 

іипсбіоп шакеРозб( еіеш ) { 

// Извлечение из каждого элемента потока публикаций ссылки, заголовка 

// и описания данных 

ѵаг баба = дебБаба( еіеш ); 
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// Создание нового <сІіѵ>-контейнера для содержимого публикации 
ѵаг сііѵ = босшпепб . сгеабеЕІешепб ( "сііѵ" ) ; 
сііѵ . сІаззИате = "розб"; 

// Создание заголовка публикации 
ѵаг Ъ.2 = босшпепб .сгеабеЕІешепб("Ь2") ; 

// Здесь содержится заголовок элемента потока и имеется ссылка, 

// указывающая на публикацию. 

Ь2.іппегНТМЬ = "<а 1ігеб='" + баба.ііпк + + баба.бібіе + "</а>"; 

// Добавление этого содержимого к <біѵ>-контейнеру публикации 
біѵ. аррепбСіііІб ( іі2 ); 

// Теперь создадим <біѵ>, в котором будет содержаться публикация 
ѵаг епбгу = боситепб . сгеабеЕІешепб ("сііѵ") ; 
епбгу.с1аззNаше = "епбгу"; 

// Добавим в <біѵ> содержимое публикации 
епбгу.іппегНТМЬ = баба. безе; 
біѵ. аррепбСіііІб ( епбгу ); 

//В завершение добавим нижнюю часть, содержащую ссылку возврата 
ѵаг теба = босишепб.сгеабеЕІешепб("р"); 
шеба.сІаззЫаше = "розбшебабаба"; 

шеба.іппегНТМЬ = "<а Ьгеб='" + баба.ііпк + "#сошшепбз'>Комментарий</а>"; 
біѵ. аррепбСіііІб ( шеба ); 

гебигп біѵ; 

} 

// Простая функция для извлечения данных из БОМ-элемента 
бипсбіоп дебБаба( еіеш ) { 

// Мы собираемся вернуть данные в виде четко отформатированного объекта 
гебигп { 

// Извлечение из элемента <ібеш> КЗЗ-потока заголовка, описания и 
// ссылки 

бібіе: еіеш.дебЕІешепбзВуТадИаше("бібіе")[0].бігзбСіііІб.побеѴаіие, 
безе: 

еіеш.дебЕІешепбзВуТадИаше("безегірбіоп")[0].бігзбСііііб.побеѴаІие, 
Ііпк: еіеш.дебЕІешепбзВуТадИаше("Ііпк")[0].бігзбСіііІб.побеѴаІие 

} ; 

} 


Будет вполне достаточно добавить этот код в верхнюю часть заголовка вашего файла шаблона ѴѴогбРгевз, 
чтобы получить результат, похожий на тот, что показан на рис. 11.2. Заметьте, что полоса прокрутки имеет 
довольно небольшой запас (что может свидетельствовать о завершении динамической загрузки на страницу 
дополнительных публикаций). 
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Рис. 11.2. Пример дополнительного содержимого, загруженного для просмотра в процессе дальнейшей 
прокрутки страницы вниз 


Динамическая загрузка содержимого является обычным примером применения А]ах. Практически всегда 
это ведет к облегчению для пользователя процесса просмотра страницы, и облегчению нагрузки на сервер. В 
любом случае количество приложений, где будет востребована вставка дополнительного содержимого не 
ограничивается лишь одними блогами. Любые веб-приложения могут получить от этот технологии весьма 
существенную выгоду, и мы более подробно рассмотрим этот аспект в следующей главе. 


А в следующем разделе мы рассмотрим еще один пример загрузки динамического содержимого, в котором 
используется та же А]ах-технология, но на этот раз мы создадим для просмотрщиков вашего блога возможность 
наблюдать за его ведением в режиме реального времени. 


Наблюдение за ведением блога в режиме реального времени 


Теперь, после того, как была проделана вся тяжелая работа по созданию динамического отображения 
публикаций, извлечению опубликованных данных и их разбору, мы можем рассмотреть другое приложение, 
польза от которого проявляется именно в блоге ѴѴогсіРге55. 


Обычно в блогах отсутствует возможность немедленного отображения новостей и обновления. 
Пользователям предоставляется статическая страница с перечнем самых последних публикаций блога, а если им 
потребуются дополнительные обновления, они будут вынуждены перезагрузить страницу в своем браузере. Но 
существует масса примеров, когда блоггер захочет немедленно сообщить пользователю какую-нибудь 
информацию, если тот все еще просматривает его страницу. Теоретически пользователь должен иметь 
возможность загрузить страницу, оставить ее открытой, чуть позже вернуться к ее просмотру, и увидеть новую 
публикацию. 
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И в этом случае мы можем найти технологии А^ах весьма хорошее применение. Для загрузки нового 
содержимого из вашего К55-потока можно воспользоваться той же самой технологией, которая была 
использована в предыдущем разделе. Рассмотрим следующий порядок действий, необходимых для придания 
обычному блогу режима работы в реальном времени: 

• Извлечение перечня самых свежих публикаций блога за определенный промежуток времени (к примеру, 
за одну минуту). 

• Обнаружение еще не отображенных публикаций. 

• Добавление этих публикаций в начало страницы. 

Реализация этого замысла, показанная в листинге 11.8, также проста, как и вышеперечисленный порядок 
действий. 

Листинг 11.8. Реализация блога, обновляемого на лету из Р55-потока, основанного на формате ХМІ_ 

// Мы собираемся совершать повторные попытки загрузить новое содержимое 
// страницы через определенный интервал времени 
зебіпбегѵаі ( бипсбіоп (){ 

// Загрузка публикации с использованием доступной нам функции азах() 

а^ах ({ 

// Мы запрашиваем простую веб-страницу, поэтому используем СЕТ 
буре: "СЕТ", 

// Ожидается КЗЗ-поток, представленный ХМЬ-файлом 
баба: "хші", 

// Получение текущего КЗЗ-потока (содержащего самые свежие 

// публикации) 

игі : "./?бееб=гзз&радеб=1", 

// Отслеживание успешного завершения извлечения КЗЗ-потока 
опЗиссезз: бипсбіоп ( гзз ){ 

// Загрузка новых публикаций в <біѵ>, 

// у которого ІБ имеет значение "сопбепб" 

ѵаг сопбепб = босшпепб. дебЕІешепбВуІб ("сопбепб"); 

// Получение ЦКЬ самой последней публикации (чтобы убедиться, 

// что мы не работает с дубликатами публикаций) 
ѵаг гесепбОКЬ = 

сопбепб. дебЕІешепбзВуТадЛаше ("П2")[0]. бігзбСПіІб .Пгеб; 

// Мы собираемся осуществить последовательный перебор 
// всех публикаций, имеющихся в КЗЗ-потоке 
ѵаг ібешз = гзз. дебЕІешепбзВуТадЛаше ( "ібеш" ); 


// Мы собираемся поместить все новые публикации 
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// в отдельный массив 

ѵаг пемііешз = []; 

// Проход по всем элементам 

Дог ( ѵаг і = 0; і < ібетз. ІепдДП; і++ ) { 

// Принудительное прекращение цикла при 
// "старой" публикации 

іД ( деДБаба( іДетз[і] ) .Ііпк == гесепДІЖЬ ) 

Ьгеак; 

// Добавление нового элемента к временному массиву 
пемІДешз.ризЬ.( іДетз[і] ); 

} 

// Последовательный перебор всех новых публикаций 

// в обратном порядке, чтобы обеспечить правильный порядок 

// их размещения на веб-сайте 

Дог ( ѵаг і = пемібетз . ІепдбЬ. -1; і >= 0; і--) { 

// Помещение в документ новой публикации 
сопбепб.іпзегбВеДоге( шакеРозб( пемібешз[і] ), 

сопбепб. ДігзбСПіІсІ ); 

} 

} 

}) ; 

// Загрузка нового содержимого страницы раз в минуту 
}, 60000 ); 

Когда этот сценарий будет добавлен в ваш шаблон ѴѴогбРгезв (наряду с тем кодом, который был 
разработан в первой части главы при создании бесконечной страницы) вы получите результат, похожий на тот, 
что изображен на рис. 11.3. 
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Рис. 11.3. ѴѴогс1Рге55 вставляет отдельную новую публикацию впереди других, более старых публикаций 
без обновления страницы 

Воспользовавшись последним усовершенствованием, вы сможете превратить простой блог в платформу, 
работающую в режиме реального времени. Следующим в очереди на «оживление» может стать форум. Добавите 
этот сценарий к вашему веб-сайту, и ваши читатели будут получать обновления по мере их публикации, без 
обновления страницы. 

Вывод 

Наиболее важным из рассмотренных понятий, которое можно вынести из этой главы, является то, что 
связанные с А]ах технологии позволяют вам придумывать новые режимы работы обычных статических 
приложений. Поскольку обработка ХМІ_-документов и их преобразование в полезные фрагменты НТМ1_ 
существенно упростились, вы имеете полную возможность их реализации в своих веб-приложениях. 

В этой главе мы создали два дополнения к обычной блог-платформе на основе ѴѴогс1Рге55. Мы реально 
избавились от необходимости перехода к более ранним публикациям по старомодным ссылкам и с разбиением 
содержимого на разные страницы. Вместо этого мы загружаем блоки публикаций в динамическом режиме, по мере 
просмотра страницы пользователем. Кроме этого, при появлении новой публикации в период просмотра страницы 
пользователем, она будет добавлена к странице, позволяя пользователю продолжать чтение, не покидая 
страницу. Оба этих усовершенствования позволяют улучшить восприятие просмотра, делая его более динамичным 
и активным, и не разбивать публикации на несколько страниц. 

В следующей главе мы создадим еще одно расширение за счет использования функциональных 
возможностей А]ах: поиск с автозаполнением. 
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Глава 12 Поиск автозаполнения 

Наиболее важными функциональными преимуществами, предоставляемыми А)ах-технологией являются 
возможности создания пользовательских интерфейсов с высокой степенью взаимодействия, многие из которых 
ранее были недоступны. Примером одного из таких новых пользовательских элементов интерфейса может служить 
так называемое поле поиска автозаполнения. Это поле во многом похоже на обычное текстовое поле, но оно 
автоматически завершает условия поиска, как только вы начинаете их ввод. Это означает, что по мере набора 
поискового запроса, клиент посылает запрос на сервер (в фоновом режиме), и пытается быстро предоставить вам 
наиболее точные результаты. 

В этой главе мы рассмотрим все компоненты, необходимые для построения полноценного поиска 
автозаполнения. Сначала мы рассмотрим, как построить и оформить страницу, потом узнаем, как отслеживать 
пользовательский ввод в текстовое поле, а затем свяжем все это с простым А)ах-запросом, обращающимся к 
простой базе данных на стороне сервера. 

Примеры поиска автозаполнения 

Поле поиска автозаполнения может проявлять себя несколькими разными способами. Например, в Соодіе 
есть версия автозаполнения его поля поиска, называемая Соодіе 5идде5і 
(Н11:р://ѵѵ\л/ѵѵ.доодІе.сот/ѵѵеЬІпр?сотрІе1:е=1). Когда вы начинаете набирать в поле запрос на поиск, эта система 
показывает вам другие запросы на поиски, наиболее часто проводившиеся другими пользователями, которые 
начинаются с тех же символов, что и только что набранные. Пример поиска автозаполнения показан на рис. 12.1. 
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Рис. 12.1. Пример обычных результатов автозаполнения 

Другим весьма популярным примером является ІпБіапі Оотаіп Зеагсіг (бНр://т51ап1ботат5еагс1т.сот/). 
Это специализированное приложение по мере набора предоставляет сведения о доступности покупаемого 
доменного имени. Этот вариант отличается от той реализации, которую представила компания Соодіе тем, что он 
автоматически завершает поиск, а не заполняет строку самого запроса. Это означает, что по мере набора 
искомого доменного имени сервер автоматически в фоновом режиме завершает ваш запрос, выдавая 
соответствующие ему результаты. Пример работы этой системы показан на рис. 12.2. 
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Рис. 12.2. Пример поиска автозаполнения в системе Іпзіапі Оотаіп Зеагсб 

Последний приводимый пример, который наиболее близок к тому, что мы будем создавать — это механизм 
автозаполнения, предоставляемый Интернет-службой закладок сіеі.ісіо.из (ЬКрѴ/сІеІ.ісіо.из/). Эта служба 
предоставляет средства, с помощью которых вы можете связать ссылки с определенными словами, позволяя 
произвести автозаполнение нескольких слов в единственном поле ввода текста. Пример работы этого механизма 
показан на рис. 12.3. 
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Рис. 12.3. Пример работы автозаполнения сіеі.ісіо.из, завершающего новый тег 

Теперь мы вплотную приблизились к созданию собственного механизма поиска автозаполнения. Это будет 
простая форма для отправки сообщений группе друзей, расположенная на веб-сайте. Автозаполняемое поле будет 
вести себя очень похоже на поле в сіеі.ісіо.из, в том, что это будет поле для ввода имен пользователей, которое 
при помощи А]'ах может быть автоматически заполнено в фоновом режиме. У вас будет возможность 
автозаполнения каждого из пользовательских имен ваших друзей, на основе тех имен, которые хранятся в 
центральной базе данных, и помещения их в список пользовательских имен, разделенных запятой, используемый 
для отправки им сообщений. Пример того эффекта, который мы собираемся получить, показан на рис. 12.4. 
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Рис. 12.4. Пример автозаполнения пользовательского имени после ввода одной буквы 

Построение страницы 

Первым шагом к созданию нашего поля поиска автозаполнения станет построение формы, в которой будет 
размещена полная установка. Эта страница по структуре будет напоминать простую форму для отправки 
сообщения группе пользователей веб-сайта. В дополнение к обычной форме отправки сообщений (состоящей из 
поля Кому и области сообщения) в эту страницу необходимо включить три важных аспекта: 

Поле ввода текста: Нам нужно обеспечить, чтобы его свойство аиіосотріеіе было выключено. Тем самым 
мы отключим включенный по умолчанию механизм автозаполнения браузера (который использует для 
автозаполнения все, что было ранее набрано в области ввода): 

<іприк Туре^'Сехб" ісі="'Ьо" паше="Со" аиТосошр1е'Се="оТТ"/> 

Загружаемое изображение-. Это небольшое, вращающееся изображение, накладываемое поверх поля 
ввода текста, чтобы показать, когда с сервера загружаются новые данные: 

<ішд згс=" іпсИсаСог . діб" ісІ="д1оас1іпд"/> 

Область результатов: Все результаты, возвращаемые с сервера, будут помещаться в область результатов и 
отображены по требованию. Физические результаты будут возвращаться в виде набора <ІІ>-элементов, в каждом 
из которых будет содержаться информация об отдельном пользователе: 

<сііѵ Іс1="ге8и11:8"><с1іѵ с1азз="зиддез'С">5иддез'Сіопз : </ йіѵхиіх/иіх/ сііѵ> 

И индикатор загрузки, и область результатов будут включены в страницу с помощью ІаѵаЗсгірІ:. Полный 
код НТМІ_для нашей страницы показан в листинге 12.1. 

Листинг 12.1. Полный код НТМІ. для формы отправки сообщений пользователям 


<Ькт1> 

<ЬеасІ> 

<зсгірк згс="сІото з"х/зсгір'Ь> 

<зсгірС згс="сіе1ау . ) з"></ зсгірО 
<зсгірС згс="зсгір1:. ) з"></зсгірО 
<1іпк геі— "збуХезкееб" Ь.геб="з1;у1е.сзз"/> 

</ЬеасІ> 

<ЪосІу> 

<богш асбіоп="" теС]іос1="Р05Т" ісі="аи'Ьо"> 

<сііѵ ісі="1;ор"> 

<біѵ ісі="т1теасі"Хз'1:гопд>5епсі Меззаде</з1:гопдХ/сііѵ> 
<сііѵ сіазз=" 1ідЫ:"> 

<1аЬе1>Ргош:</1аЬе1> 

<сііѵ с1азз="гезС бгош"> 

<ішд згс="ісопз/)оЬп ісоп.)рд"/> 

<зСгопд>ЦоЬп К.езід</зСгопд> 

</біѵ> 

</біѵ> 

<сііѵ сіазз="диегу багк"> 

<1аЬе1>То:</1аЪе1> 

<сііѵ с1азз="гезк"> 
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<іпри1: ^уре="'Ьех1:" ісІ="'Со" паше="'Ьо" аи1;осошр1е1;е="обб"/> 
</сііѵ> 

</сііѵ> 

<сііѵ с1азз="1ідЫ;"><1:ехСагеа></ СехбагеаХ/ сііѵ> 

<сііѵ с1азз="зиЬті'Ь"><іпри'Ь буре="зиЪті1;" ѵа1ие="&гадио; 

5епс1"/х/с1іѵ> 


</сііѵ> 
</богт> 


</ЪосІу> 

</Ы:ш1> 


На рис. 12.5 представлена копия экрана с видом страницы, имеющей полное стилевое оформление. 
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Рис. 12.5. Вид макета формы после простого стилевого оформления Результат нашего ТНе гезиіі: оГ уоиг 
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Теперь, когда у нас есть установленная и готовая к пользовательскому вводу форма, настало время 
приступить к следующему шагу — отслеживанию вводимой пользователем информации в поле ввода имени 
пользователя, и соответствующего на нее реагирования. 

Отслеживание ввода с клавиатуры 

Одним из важных аспектов поиска автозаполнения является создание естественно воспринимаемого 
интерфейса, с помощью которого пользователь сможет вводить данные и получать его расширенный вариант. Для 
большинства поисковых вводов основная часть интерфейса поиска обращается к отдельному полю ввода текста. 
Вы будете и в дальнейшем использовать этот интерфейс, включая ваши собственные приложения. 

При конструировании этого механизма ввода нужно учесть некоторые моменты, чтобы быть уверенным, 
что предоставленный уровень взаимодействия близок к идеалу: 

• Нужно обеспечить включение поиска автозаполнения через подходящие интервалы времени, когда ответ 
дается достаточно быстро, чтобы пользователь сумел на него среагировать. 

• Нужно обеспечить, чтобы поиск на сервере осуществлялся как можно медленнее. Чем быстрее 
осуществляется поиск, тем большая нагрузка ложится на сервер. 

• Нужно обеспечить знание подходящего момента для осуществления нового поиска автозаполнения и 
открытия результатов; для отказа от поиска и открытия старых результатов; и для скрытия результатов. 
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Теперь, изложив эти пункты, мы можем более точно определить взаимодействие с пользователем, которое 
хотим реализовать: 

• Результаты автозаполнения должны отображаться на основе того, что пользователь набрал в поле ввода 
текста. Кроме того, чтобы избежать слишком неоднозначных результатов поиска, пользователь должен 
предоставить для него минимальное количество символов. 

• Результаты поиска должны вызываться через строго определенные интервалы времени (чтобы защитить 
сервер от перегрузки от действий слишком быстро печатающих пользователей), но только при изменениях 
введенного содержимого. 

• Подборка результатов должна быть показана или скрыта в зависимости оттого, имеет ли элемент ввода 
пользовательский фокус (к примеру, если пользователь убрал фокус с элемента ввода, результаты 
должны быть скрыты). 

С учетом всех этих пунктов мы можем разработать отдельную функцию для привязки требуемого 
взаимодействия к отдельному полю ввода текста. В листинге 12.2 показана функция, которая может быть 
использована для достижения желаемых результатов. Эта функция обрабатывает только случаи, при которых 
должен проводится поиск или при которых результаты должны быть показаны или скрыты, а не сам поиск или 
визуальные результаты (мы добавим все это чуть позже). 

Листинг 12.2. Функция привязки поиска автозаполнения к полю ввода текста 

бипсбіоп сіеіауесііприб (орб) { 

// Количество времени ожидания до отслеживания нового пользовательского 
// ввода 

орб.біте = орб.біте || 400; 

// Минимальное количество символов, ожидаемых до запуска запроса 
орб.сбагз = орб.сбагз != пиіі ? орб.сбагз : 3; 

// Обратный вызов, запускаемый, когда должны быть показаны 
// всплывающие результаты, и, возможно, когда должен быть сделан 
// новый запрос 

орб.ореп = орб.ореп | | бипсбіоп (){} ; 

// Обратный вызов, выполняемый, когда всплывающие результаты должны 
// быть закрыты 

орб.сіозе = орб.сіозе || бипсбіоп (){}; 

// Фокус поля должен быть принят во внимание для открытия 

// (закрытия) всплывающих результатов 

орб.босиз = орб.босиз !== пиіі ? орб.босиз : баізе; 

// Запоминание исходного значения, с которым мы начинаем 
// работать 

ѵаг оісі = орб . еіеш. ѵаіие; 

// и текущего состояния открыто-закрыто всплывающего результата 
ѵаг ореп = баізе; 


// Проверка изменений ввода в заданный интервал времени 
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зебіпбегѵаі (бипсбіоп () { 

// Новое вводимое значение 
ѵаг пеѵбѴаІие = орб. еіеш. ѵаіие; 

// Количество введенных символов 
ѵаг Іеп = з.іепдбб; 

// Быстрая проверка на изменения значения со времени последней 

// проверки ввода 

іб ( оісі != пемѴаІие ) { 

// Если введено недостаточно символов, и всплывающие результаты 
// в данный момент открыты 
іб ( ѵ < орб.сбагз && ореп ) { 

// Закрыть отображение 
орб .сіозе (); 

//И запомнить, что оно закрыто 
ореп = баізе; 

// В противном случае, если было введено минимальное 
// количество символов пока оно больше одного символа 
} еізе іб ( ѵ >= орб.сЬагз && ѵ > 0 ) { 

// открыть выплывающие результаты с текущим значением 
орб.ореп( пемѴаІие, ореп ); 

// Запомнить, что всплывающие результаты на данный 
// момент открыты 
ореп = бгие; 

} 

// Сохранение на будущее текущего значения 
оісі = пейѴаІие; 

} 

}, орб.біше ); 

// Отслеживание нажатия клавиши 
орб.еіеш. опкеуир = бипсбіоп(){ 

// Если в результате нажатия клавиши символов больше не осталось, 

// закрыть всплывающие результаты 
іб ( бЬіз. ѵаіие. ІепдбЬ. == 0 ) { 

// Закрыть результаты 
орб.сіозе (); 

// Запомнить, что они закрыты 
ореп = баізе; 
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} 


} ; 


// Если мы также проверяем пользовательский фокус (для управления 
// открытием-закрытием всплывающих результатов) 

ІЕ ( орЕ.Еосиз ) { 

// Отслеживание перемещения пользователя за пределы элемента ввода 
орЕ . еіеш. опЫиг = ЕипсЕіоп(){ 

// Если результаты открыты 
іЕ ( ореп) { 

// закрыть их 
орЕ. сіозе (); 

// и запомнить, что они закрыты 
ореп = Еаізе; 

} 

} 

// Отслеживание, когда пользовательский фокус вернется на элемент 
// ввода 

орЕ. еіегп. Еосиз = ЕипсЕіоп (){ 

// если во всплывающих результатах есть какое-нибудь значение, 

// и они в данный момент закрыты 

іЕ ( ЕЬіз . ѵаіие . ІепдЕЬ. != О && ! ореп ) { 

// повторное открытие всплывающих результатов, но с пустым 
// значением 

// (это позволит 'открывающей' функции узнать, что 
// перезапрашивать новые результаты с сервера не нужно, 

// нужно их просто заново открыть). 
орЕ.ореп ( ' ', ореп ); 

//И запомнить, что они открыты 
ореп = Егие; 

} 

} ; 

} 

} 

В листинге 12.3 показано, как в нашей реализации автозаполнения для отслеживания пользовательского 
ввода использовать простую функцию сіеіауесііприі:. 

Листинг 12.3. Использование универсальной функции сіеІауесЛприіО в нашей реализации автозаполнения 

// Инициализация задержки проверки ввода в поле 
сІеІауесІІприС ({ 

// Прикрепление к полю текстового ввода 
еіеш: ісЗ ("Ео") , 


// Мы намереваемся приступить к поиску только после ввода 
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// одного символа 
сііагз : 1, 

// Когда текстовое поле теряет фокус, закрыть всплывающие результаты 
іосиз: бгие, 

// Обработка момента открытия всплывающего результата 
ореп: іипсбіоп (д,ореп){ 

// Извлечение последнего слова из списка слов, разделенных 
// запятыми 

ѵаг и = бгіш( р.зиЬзбг( д. ІазбІпсіехО і ( ' , ' ) +1, д.ІепдбЪ. ) ); 

// Обеспечение того, что мы работаем как минимум со словом 
і б ( и ) { 

// Отображение анимации, свидетельствующей о загрузке 
зііои ( ісі ( "діоасііпд" ) ); 

// Загрузка и обработка результатов с сервера 

} 

Ь 


// Когда нужно закрыть всплывающие результаты 
сіозе: іипсбіоп (){ 

// Скрытие подборки результатов 
Ьісіе ( ісі ( "гезиібз" ) ); 

} 

}) ; 


Теперь, когда у нас есть универсальная функция для отслеживания пользовательского ввода, нужно 
решить задачу ее привязки к сценарию на стороне сервера, который будет предоставлять данные о 
пользователях, которые можно загрузить на ваш веб-сайт. 

Извлечение результатов 

Следующим основным аспектом построения поиска автозаполнения является загрузка данных, которые 
будут показаны пользователю. Для загрузки этих данных не требуется использование технологии А]ах (которую 
мы будем применять в этой конкретной реализации); вместо этого они могут быть написаны в виде структуры 
данных и загружены в страницу во время выполнения приложения. 

Наша реализация автозаполнения требует в законченном виде только одного: пользователей. Их 
пользовательские имена будут отображены с сопутствующей информацией (включая полное имя пользователя и 
его значок). С расчетом на это намного легче будет просто вернуть с сервера НТМІ_-фрагмент (в форме некоторого 
количества <ІІ>-элементов), содержащий всю необходимую информацию о соответствующих пользователях. 

В листинге 12.4 показан простой Аіах-вызов, необходимый для загрузки с сервера фрагмента НТМІ. во 
всплывающие результаты. 

Листинг 12.4. АІАХ-запрос для загрузки фрагмента НТМІ_ (содержащего информацию о пользователях) в 
подборку результатов для автозаполнения 


// Создание запроса новых данных 
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а]ах ({ 

// Создание простого СЕТ-запроса к ССІ-сценарию, возвращающему 
// НТМЬ-блок, состоящий из элементов Ы 
буре: "СЕТ", 

игі : "аибо. сді?бо=" + ѵг, 

// Отслеживание возвращения НТМЬ 
опЗиссезз: бипсбіоп(Ьбті ){ 

// Вставка его в предназначенный для результатов ИЬ-контейнер 
гезиібз . іппегНТМЬ = Ьбті; 

// и скрытие анимации загрузки 
Ьісіе ( ісі ("діоасііпд") ); 

// Обработка результатов... 

} 

}) ; 

Вы должны обратить внимание на то, что в листинге 12.4 мы загружаем НТМб-результаты из приложения 
серверной стороны под названием аиіо.сді, которое воспринимает один аргумент — текущий текст, по которому 
ведется поиск (скорее всего это будет часть имени пользователя). Сценарий аиіо.сді, написанный с 
использованием языка РегІ, показан в листинге 12.5. Он ведет поиск соответствий в небольшом наборе данных, 
возвращая всех подходящих пользователей в длинный НТМб-фрагмент. 

Листинг 12.5. Простой РегІ-сценарий, отыскивающий подходящих пользователей 

#! /изг/Ьіп/регі 

изе ССІ ; 

# Извлечение из строки входящего запроса параметра 'д' 
шу $сді = пем ССІ(); 

ту $д = $сді->рагат ('бо'); 

# Наша ограниченная "база данных" содержит пять пользователей, 

# их пользовательские и полные имена, 
ту @баба = ( 

{ 

изег => "Ъгасііеу", 
пате => "Вгабіеу 3" 

}, 

{ 

изег => "дазоп", 
пате => "базоп 3" 

}, 

{ 

изег => "добт", 
пате => "бобп К." 

}, 
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{ 

изег => ’^озН", 
паше => "ИозЪ. К" 

Ь 

{ 

изег => ’^иііа", 
паше => "ііиііа И" 



# Обеспечение выдачи правильного НТМЬ-заголовка 
ргіпб "Сопбепб-буре: бехб/Ы:т1\п\п"; 

# "Поиск" по данным 
ЕогеасЬ. ту $гом (@баба) { 

# Поиск пользователей, соответствующих нашему аргументу 

# поиска автозаполнения 

іЕ ( $гоад->{изег} =~ /$д/і || $гои->{пате} =~ /$ц/і ) { 

# Если пользователь соответствует условию, выдача 

# необходимого НТМЬ 

ргіпб ддХІі ісІ="$гом->{изег} "> 

<ішд згс="ісопз/$гоад->{изег} ісоп^рд"/> 

<біѵ> 

<збгопд>$гом->{изег}</збгопд> ($гом->{ пате }) 
</біѵ> 

</1і>~; 

} 

} 


Результат, возвращаемый ССІ-сценарием ничто иное, как НТМ1_-фрагмент, содержащий <1і>-элементы, 
соответствующие каждому подходящему пользователю. В листинге 12.6 показан результат поиска для буквы ]. 

Листинг 12.6. Фрагмент НТМІ_, возвращенный с сервера, представляющий несколько различных 
пользователей 

<1і ісІ='^азоп"> 

<ішд згс=" ісопз/ ^ азоп ісоп^рд"/> 

<біѵ> 

<збгопд>^азоп</збгопд> (Иазоп 5) 

</біѵ> 

</1і><1і іб='^оПп"> 

<ітд згс=" ісопз/^ оПп ісоп^рд"/> 

<біѵ> 

<збгопд>^ оПп</збгопд> (ИоПп К.) 

</біѵ> 

</1ІХІІ ІСІ='^ОЗІТ"> 



243 


<ітд згс=" ісопз/^ озЬ. ісоп^рд"/> 
<сііѵ> 

<зкгопд>^ 05к</зкгопд> (ДозЬ. К) 
</біѵ> 

</1і><1і іб='^и1іа"> 

<ішд згс="ісопз/;]и1іа_ісоп.^рд"/> 
<сііѵ> 

<зкгопд>^и1іа</зкгопд> (Диііа И) 
</біѵ> 

</1і> 


Теперь, когда у нас есть небольшой набор данных, возвращенный НТМІ_-фрагмент, и НТМІ_, вводимый в 
веб-сайт, следующим логичным шагом будет добавление способов перехода пользователя по результатам. 

Переход по списку результатов 

Теперь, когда пользователь ввел какой-то текст в поле ввода, и с сервера были загружены некоторые 
результаты, настало время добавить способ перемещения пользователя по возвращенному набору результатов. В 
нашей реализации поиска автозаполнения мы собираемся предложить два различных способа перемещения по 
результатам: с помощью клавиатуры и с помощью мыши. 

Перемещения с помощью клавиатуры 

Перемещение по результатам с помощью клавиатуры по всей вероятности является наиболее важным 
аспектом реализации. Поскольку пользователь находится в процессе набора имени пользователя, он дает ему 
возможность если это необходимо завершить автозаполнение, оставляя руки на клавиатуре. 

Нам нужна поддержка клавиши табуляции, чтобы завершить работу с текущим выбранным пользователем, 
и клавиш со стрелками вверх и вниз, для выбора различных пользователей из списка результатов. В 
листинге 12.7 показано, как этого можно будет достичь. 

Листинг 12.7. Обработчик события нажатия клавиш перемещений 

// Отслеживание ввода информации в поле 
ісі ("Со") . опкеургезз = іипскіоп (е) { 

// Получение всех пользователей из списка результатов 
ѵаг 1і = ісі ( "гезиікз") .деСЕІешепСзВуТадЛаше("1і"); 

// Когда нажата клавиша [ТАВ] или клавиша [Епбег] 
іі ( е.кеуСосІе == 9 | е.кеуСосІе == 13 ) { 

// Добавление пользователя к полю ввода текста 

// Если нажата клавиша вверх 
} еізе іі ( е.кеуСосІе == 38 ) 

// Выбор предыдущего пользователя, или последнего пользователя 
// если мы находимся в начале списка) 

гебигп ирбакеРоз ( сигРоз . ргеѵіоизЗіЫіпд | | 1і [ Іі.ІепдкЬ - 1 ] ); 

// Если нажата клавиша вниз 
еізе іі ( е.кеуСобе == 40 ) 

// Выбор следующего пользователя, или первого пользователя (если мы 
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// находимся в конце списка) 

гебигп ирбабеРоз ( сигРоз . пехбЗіЫіпд | | 1 і [0] ); 


Перемещение с помощью мыши 

В отличие от перемещений с помощью клавиатуры, все перемещения, осуществляемые с помощью мыши 
должны иметь динамическую привязку при каждом возвращении с сервера нового набора результатов. Замысел 
перемещений с помощью мыши состоит в том, что при каждом прохождении указателя мыши над одним из <ІІ>- 
элементов, это элемент становится текущим «выбранным», и если на нем щелкнуть кнопкой, связанное с <1і> имя 
пользователя должно быть добавлено в поле ввода текста. В листинге 12.8 показан пример кода, с помощью 
которого можно реализовать этот замысел. 

Листинг 12.8. Привязка события перемещения указателя мыши к <ІІ>-элементу 

// При каждом прохождении указателя мыши над 1і, 

// он становится текущим выбором пользователя 
1і [ і ]. опшоизеоѵег = бипсбіоп (){ 
ирбабеРоз ( йіз ) ; 

} ; 


// Если пользователь произвел щелчок, 

1і[і].опсііск = бипсбіоп(){ 

// добавить имя пользователя к полю ввода 
абббзег( ІЬіз ); 

// и вернуть фокус на это поле 
ісі ("Со") . босиз () ; 

} ; 


Теперь, когда реализованы все перемещения, нужно завершить работу над основными компонентами 
поиска автозаполнения. Окончательный результат нашей работы показан в следующем разделе. 

Окончательный результат 

Мы завершили создание всех компонентов, необходимых для поиска автозаполнения: отслеживания 
пользовательского ввода, связь с сервером, и перемещение по результатам. Настало время связать все это 
воедино и поместить на страницу. В листинге 12.9 показан окончательный код ІаѵаЗсгірІ для полноценного 
поиска автозаполнения. 

Листинг 12.9. Полный код ІаѵаБсгірІ: для поиска автозаполнения 

ботРеабу( бипсбіоп () { 

// Обеспечение скрытия всплывающих результатов в начале работы 
Ыбе ( іб ( "гезиібз" ) ); 

// Отслеживание уже введенных имен пользователей 
ѵаг бопебзегз = {}; 

// Отслеживание выбранного на данный момент пользователя 
ѵаг сигРоз; 
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// Создание изображения индикации загрузки 
ѵаг ішд = босшпепб. сгеабеЕІешепб ( "ішд" ); 
ішд.згс = "іпбісабог. діб" ; 
ітд.іб = "діоабіпд"; 

// и добавление его к документу сразу за полем ввода 
ісі ("бо") . рагепбііобе . іпзегбВебоге ( ішд, іб("бо") ); 

// Создание области отображения результатов 
ѵаг сііѵ = босшпепб .сгеабеЕІешепб("біѵ"); 
сііѵ.ісі = "гезиібз"; 

біѵ.іппегНТМЬ = "<сііѵ с1азз= ' зиддезб ' >Зиддезбіопз : </сііѵ><и1></и1>" ; 

// и добавление ее за полем ввода 

ісі ("бо") . рагепбііобе . аррепбСіііІб ( сііѵ ); 

// Отслеживание ввода в поле 

ісі ("бо") . опкеургезз = бипсбіоп (е) { 

// Получение всех пользователей из набора результатов 
ѵаг 1і = ісі ("гезиібз") .дебЕІешепбзВуТадЫаше("1і"); 

// Если нажата клавиша [ТАВ] или [Епбег] 
іі ( е.кеуСобе == 9 | е.кеуСобе == 13 ) { 

// Перезапуск списка текущих пользователей 
ІоасШопе (); 

// Если текущий выбранный пользователь отсутствует в списке 
// выбранных, добавление его к полю ввода 
іі ( ІсіопеЦзегзі сигРоз.ісі ] ) 

абсШзег ( сигРоз ) ; 

// Отключение обычной реакции на нажатие клавиши 
е. ргеѵепбБеіаиІб (); 
гебигп іаізе; 

// Если нажата клавиша вверх 
} еізе іі ( е.кеуСобе == 38 ) 

// Выбор предыдущего пользователя, или последнего пользователя 
// если мы находимся в начале списка) 
гебигп ирбабеРоз ( сигРоз . ргеѵіоизЗіЫіпд | 

1І [ Іі.ІепдбП - 1 ] ); 


// Если нажата клавиша вниз 
еізе іі ( е.кеуСобе == 40 ) 

// Выбор предыдущего пользователя, или последнего пользователя 

// если мы находимся в начале списка) 

гебигп ирбабеРоз ( сигРоз. пехбЗіЫіпд | | 1і[0] ); 
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выбран 


} ; 


// Инициализация задержки проверки ввода в поле 
беіауесііприб ({ 

// Прикрепление к полю текстового ввода 
еіеш: ісі ("По") , 

// Мы намереваемся приступить к поиску только после ввода 
// одного символа 
сііагз : 1, 

// Когда текстовое поле теряет фокус, закрыть всплывающие 
// результаты 
босиз: бгие, 

// Обработка момента открытия всплывающего результата 
ореп: бипсбіоп (д,ореп){ 

// Извлечение последнего слова из списка слов, разделенных 
// запятыми 

ѵаг ѵі = бгіт( р.зиЬзбг( р. ІазбІпсІехО И ( ' , ' ) +1, р.ІепдбЬ ) ); 

// Обеспечение того, что мы работаем как минимум со словом 

( ѵі ) { 

II Отображение анимации, свидетельствующей о загрузке 
зЬои ( ісі ( "ріоасііпд" ) ); 

// Обеспечение, что ни один пользователь пока не 
сигРоз = пиіі; 

// Получение ИЬ, предназначенного для хранения всех 
// результатов 

ѵаг гезиібз = ісі ( "гезиібз") . ІазбСіііІсІ; 

// и его очистка 
гезиібз.іппегНТМЬ = 

// Создание запроса новых данных 

а^ах ({ 

// Создание простого СЕТ-запроса к 
// ССІ-сценарию, возвращающему 
// НТМЬ-блок с Ы-элементами 
буре: "СЕТ", 
игі : "аибо . сді?д=" + ѵі , 

// Отслеживание поступления НТМЬ 
опЗиссезз: бипсбіоп(Ьбші ){ 


// Его вставка в ИЬ результатов 
гезиібз . іппегНТМЬ = Пбші; 
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//И скрытие загрузочной анимации 
Пібе ( ісі ( "діоабіпд" ) ); 

// Повторная инициализация списка получаемых 
// имен пользователей 
ІоабБопе () ; 

// Последовательный перебор каждого 

// возвращенного имени пользователя 

ѵаг 1і = гезиібз . дебЕІетепбзВуТадИате ( "1і" ); 

Ног ( ѵаг і = 0; і < Іі.ІепдбП; і++ ) { 

// Если мы уже добавили пользователя, 

// удаление связанного с ним элемента Ы 
іі ( бопеЦзегз [ 1і[і] . ісі ] ) 

гезиібз. гетоѵеСіііІб ( 1 і [і — ] ); 

// Иначе привязка события к И с именем 
// пользователя 
еізе { 

// Как только указатель мыши 
// пользователя проходит над 1і, 

// установка связанного с ним имени 
// текущим именем пользователя 
1і[і].опшоизеоѵег = іипсбіоп(){ 
ирбабеРоз ( бНіз ) ; 

} ; 

// При щелчке на имени пользователя 
1і[і] .опсііск = іипсбіоп () { 

// Добавление имени в поле ввода 
абсШзег ( бНіз ); 

// и возврат фокуса на поле ввода 
іб("д").іосиз(); 

} ; 

} 

} 

// Проход по списку имен пользователей 
1і = гезиібз.дебЕІешепбзВуТадИаше( "1і" ); 

// Если имен не осталось (они все уже добавлены) 
іі ( Іі.ІепдбП == 0 ) 

// скрытие результатов 
Пібе( іб("гезиібз") ); 
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еізе { 

// Добавление к каждому оставшемуся 
// элементу имен пользователей классов 
// 'обб', чтобы придать списку 
// «полосатый» вид 

Дог ( ѵаг і = 1; і < Іі.ІепдбЬ; і += 2 ) 
аббСІазз( 1і[і], "обб" ); 

// Установка текущего выбранного имени 
// пользователя на первый элемент списка 
ирбабеРоз ( 1і[0] ); 

// и отображение результатов 
збювд( іб("гезиібз") ); 


// Теперь всплывающие результаты должны быть скрыты 
сіозе: Дипсбіоп() { 

// Скрытие набора результатов 
Ьібе( іб("гезиібз") ); 

} 

}) ; 

Дипсбіоп бгіш(з) { 

гебигп з.геріасе(/ Л \з + /, "") .геріасе(/\з + $/, 

} 

// Изменение подсветки текущего выбранного имени пользователя 
Дипсбіоп ирбабеРоз( еіеш ) { 

// Обновление позиции текущего выбранного элемента 
сигРоз = еіеш; 

// Получение всех 1і-элементов с именами пользователей 
ѵаг 1і = іб ( "гезиібз").дебЕІешепбзВуТадИаше("1і"); 

// Удаления класса 'сиг' из текущего выбранного элемента 
бог ( ѵаг і = 0; і < Іі.ІепдбЬ; і++ ) 
гешоѵеСІазз( 1і[і], "сиг" ); 

//И добавление подсветки на текущий элемент имени 

// пользователя 

аббСІазз( сигРоз, "сиг" ); 



гебигп іаізе; 


} 

// Повторная инициализация списка имен пользователей, который уже 
// добавлен пользователем в поле ввода 

іипсбіоп ІоасШопеО { 
бопеЧзегз = {}; 

// Проход по списку имен пользователей (разделенных запятыми) 

ѵаг изегз = ісі ("я") . ѵаіие . зрііб (' , ' ) ; 

іог ( ѵаг і = 0; і < изегз.ІепдбП; і++ ) { 

// Сохранение имени пользователя (в качестве ключа) в 
// хэш-объекте 

бопеЦзегз [ бгіт( изегз [ і ]. ПоЬо'мегСазе () ) ] = бгие; 

} 

} 

// Добавление имени пользователя к полю ввода текста 
іипсбіоп абсШзег( еіеш ) { 

// Текстовое значение из поля ввода текста 
ѵаг ѵ = ісі ("По") .ѵаіие; 

// Добавление имени пользователя в конец содержимого поля ввода, 

// обеспечение его отделения знаком запятой 
ісі ( "ісо" ) . ѵаіие = 

( ѵ . іпбехОі ( 1 , ' ) >= 0 ? ѵ.зиЬзбг(0, ѵ. ІазбІпсіехОі ( ' , ' ) + 2 ) : ' 
+ еіеш. ісі + ", 

// Добавление имени пользователя к основному списку 
// (избавляющего от необходимости полной перезагрузки списка) 
бопеЧзегз [ еіеш. ісі ] = бгие; 

// Удаление Іі-элемента с именем пользователя 
еіет.рагепбііосіе . гетоѵеСіііІсі ( еіеш ); 

// и скрытие списка результатов 
Пісіе ( ісі ("гезиібз") ); 


На рис. 12.6 показано, как выглядит окончательный результат. 
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Рис. 12.6. Копия экрана поиска автозаполнения в действии при завершении выбора второго имени 
пользователя 

Окончательный результат выглядит впечатляющим и весьма полезным в применении. Основные концепции 
поиска автозаполнения не отличаются особой сложностью или трудностью реализации, но собранные воедино они 
дают очень хороший интерактивный результат. 

Вывод 

Поиск автозаполнения создан в качестве хорошего дополнения практически к любому приложению. При 
этом появляется возможность помочь пользователю с вводом данных при работе почти с каждым текстовым полем. 

В этой главе я охватил все аспекты создания поиска автозаполнения для ввода пользовательских имен в 
простую форму. Отдельно было рассмотрено, как захватить ввод текста пользователем, послать запрос сценарию 
на стороне сервера, забрать назад соответствующие данные и дать возможность пользователю осуществлять 
переход по результатам. Использование концепций, представленных в этой главе, и их адаптация к вашему 
конкретному случаю, принесет вашим пользователям весьма ощутимые выгоды. 

Рабочая демонстрация этого примера, а также подробные инструкции по настройке оборудования на 
стороне сервера доступны на веб-сайте этой книги Іі1:1:р://ѵѵ\л/ѵѵ дзрго.огд/. Исходный код как всегда доступен в 
разделе Зоигсе СосІе/ОоѵѵпІоасІ веб-сайта Аргеэз ИНрѴ/ѵѵѵѵѵѵ.аргезБ.сот. 
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Глава ІЗАіахѴѴікі 

Появление на переднем крае веб-разработки различных исполнительных сред, основанных на концепции 
модель-представление-контроллер — МѴС (к примеру КиЬу оп КаіІ5 и 0]апдо), навело меня на мысль, что настало 
время рассмотреть некоторые альтернативные языки программирования, используемые для разработки веб¬ 
приложений. В качестве примера, исследуемого в этой главе я выбрал простую браузерную ѵѵікі. 

Что такое ѴѴікі? 

В соответствии с ѴѴІкіребіа.огд (бесспорно, самым популярным веб-сайтом, основанным на ѵѵікі- 
технологии), ѵѵікі — это разновидность веб-сайта, позволяющая любому посетителю быстро и просто добавлять, 
удалять, или же редактировать все содержимое, причем для этого иногда не требуется даже регистрации. 
Простота взаимодействия и работы превращает ѵѵікі в весьма эффективный инструмент для совместного создания 
письменного материала. 

Кроме этого для пользовательской настройки ѵѵікі-записей предоставляется целая подборка средств 
форматирования. На рис. 13.1 показана главная страница ѵѵікі после нескольких правок, внесенных различными 
пользователями. 

Уникальность этого конкретного примера заключается в том, что логика движка ѵѵікі целиком написана на 
ІаѵаЗсгірі, именно код ІаѵаЗсгірі посылает запросы к базе данных непосредственно на сервер. Этот учебный 
пример демонстрирует ряд основных концепций, необходимых для разработки современных веб-приложений, 
даже при том, что на сервере отсутствует обычная логика приложения. 

Само приложение разбивается на три части: клиентскую, серверную и базу данных (как и в случаях с 
большинством А]'ах-приложений), каждая из которых будет подробно рассмотрена. Клиентская часть отвечает за 
взаимодействие с пользователем и за управление интерфейсом. Серверная часть отвечает за управление связью 
между клиентской частью и источником данных. 

Чтобы стало понятным, для чего конкретно предназначено это приложение, на что оно способно, и как 
работает, я собираюсь провести вас по каждой его особенности, и объяснить, как код этого приложения можно 
будет использовать в своих собственных разработках. 
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Рис. 13.1. Копия экрана, демонстрирующая ѵѵікі в действии 

Обращение к базе данных 

Каждая страница ѵѵікі должна быть кем-то создана и отредактирована. Это означает, что нам нужно где-то 
хранить все предоставленное пользователем содержимое, чтобы в дальнейшем получить к нему доступ. Наверное, 
наиболее правильным решением будет создание простой базы данных, в которой можно будет хранить все свои 
данные. Чтобы дать возможность клиентской стороне, написанной на ІаѵаЗсгірІ:, обращаться к базе данных, нам 
нужно иметь на серверной стороне какой-нибудь код, занимающий место между клиентским кодом и базой данных 
ѵѵікі. На рис. 13.2 показано, как выглядит прохождение каждого запроса к базе данных. Этот процесс является 
общим для всех форм выполняемых операций (например, 5ЕІ.ЕСТ, ІІМ5ЕРСГ и т.д.). 

Связь клиентской стороны с базой данных нужна будет в двух случаях. Во-первых, для запроса к базе 
данных и извлечения всех правок конкретной страницы. Во-вторых, когда мы вставляем в базу данные новой 
правки. Порядок прохождения обоих этих запросов фактически один и тот же, что облегчает создание общего, 
упрощенного уровня связи, который может быть использован и в других ІаѵаЗсгірІ-приложениях. Еще одной 
приятной особенностью общего уровня связи является возможность легко пройти по всей технологической 
цепочке связи (показанной на рис. 13.2) и посмотреть, как ІаѵаЗсгірІ: может связываться с базой данных. 
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Рис. 13.2. Технологический процесс, используемый в приложении для выполнения запроса от клиента 
ВНИМАНИЕ 

Важно понимать, что отправлять обычные 5()І_-запросы от клиента к серверу не следует; подобные 
действия открывают путь для злоумышленников, атакующих сервер и базу данных. Именно из-за этого в нашем 
приложении все 5()І_-запросы отображены ключевыми словами, которые превращаются в действующие запросы на 
серверной стороне. Таким образом мы получаем большую гибкость на стороне клиента, уберегая базу данных от 
атак. 


Чтобы понять, как работает эта технологическая цепочка, мы пройдем по всему процессу создания 
запроса от ІаѵаЗсгірІ клиента к серверу и базе данных. 

Аіах-запрос 

А)ах-запрос осуществляется при необходимости связи с базой данных (и, соответственно, с сервером). К 
примеру, А)ах-запрос осуществляется, если нужно сохранить правку, внесенную в ѵѵікі. Правка состоит из четырех 
информационных частей: 

Заголовка ѵѵікі-страницы : Общее соглашение об наименовании ѵѵікі-страниц использует так называемую 
схему СатеІСазе (двугорбого верблюда), которая заключается в соединении воедино слов, начинающихся с 
большой буквы. Например, главная страница нашего ѵѵікі именуется НотеРаде. 

Имени автора правки: Пользователи вносящие правки, могут указать свое имя. Но, если они захотят, то 
могут сохранить анонимность (столь популярную во многих ѵѵікі-проектах). 

Самого текста правки: Это потенциально объемный текст, вводимый пользователем. Содержимое 
отформатировано с помощью распространенной системы форматирования текста ТехІІІе. 

Точного времени внесения правки: Оно генерируется на стороне клиента и (будем надеяться) 
используется в качестве уникального идентификатора. Поскольку время дается с точностью до миллисекунд, для 
нашего приложения этого будет вполне достаточно. 

Теперь, используя все эти части данных, мы можем построить запрос, посылаемый к базе данных. 
Упрощенная версия кода, необходимого для сохранения правки показана в листинге 13.1. 

Листинг 13.1. Код, необходимый для сохранения данных, полученных от клиента, в базе данных на 
стороне сервера 

// Вставка правки в базу данных 
зяІЕхес ( 

// Оператор запроса, действующий код которого хранится на сервере 
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"іпзегб", 

[ 

йосшпепб . ііЫе, // Заголовок записи 

$("#аи'Ыіог").ѵаі(), // Имя автора, предоставленное пользователем 

$ ("#'Ьех'Ь") . ѵаі () , // Текст правки 

(пем БабеО) . дебТітеО // Точное время правки 

] , 

// После выполнения запроса — перезагрузка списка правок 
геіоасі 


Вслед за функцией зцІЕхес происходит подготовка 5(ЗІ.-запроса (который затем превращается в строку 
СОІ-запроса), построение ІЖІ_ для запроса, и создание А)ах-запроса. Для объединения всего этого в единое целое 
мы воспользуемся возможностями А)ах-библиотеки )<3иегу, которая может обрабатывать НТТР Р05Т-запросы 
(Р05Т-запрос необходим для отправки длинного текста правки). Окончательный вариант Аіах-запроса мы увидим 
в разделе «Обработка 150І\І-ответа». 

Отправив запрос на сервер, нужно посмотреть, как запрос к базе данных обрабатывается на стороне 
сервера. 

Код на стороне сервера 

Серверная часть приложения имеет очень простую и легко воспроизводимую логику. Общая задача 
состоит в получении от клиента 5())І--запроса, выполнении его в базе данных 5(ЗІ_ и возвращении результатов в 
виде 150І\І-строки. Чтобы воплотить это приложение в жизнь, я решил усовершенствовать его логику и 
разработать дубликаты рабочих версий на всех популярных языках сценариев: РегІ, РНР, РуІІпоп и РиЬу. Я 
предполагаю, что вам приходилось иметь дело по крайней мере с одним из этих языков; а если нет, то у вас будет 
прекрасная возможность ознакомиться с ними на нашем примере. 

Обработка запроса 

Клиентская часть только что инициировала связь с серверной частью приложения, требуя выполнения 
5<ЗІ_-запроса к базе данных. Доступ к этому запросу и к имени базы данных, на которой он должен быть 
выполнен, можно получить через обращение к СОІ-параметрам, переданным приложению. В предыдущем разделе 
мы видели, что сценарию на серверной стороне передаются два параметра: имя базы данных и текст 5С5І_- 
запроса. Чтобы понять, как извлекаются параметры, в листинге 13.2 показано, как это делается в версии кода на 
стороне сервера, написанном на языке КиЬу. 

Листинг 13.2. Извлечение СОІ-параметров, переданных серверной части приложения, написанной на КиЬу 

# Импорт ССІ -библиотеки 
гедиіге 1 сді 1 

# Создание нового ССІ-объекта, который проведет разбор 

# входящих ССІ-параметров 
сді = ССІ .пем 

# Захват параметров запроса 
зді = сді [' зді '] 


# Получение от пользователя имени базы данных. 
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# и обеспечение отсутствия в них злонамеренно 

# вставленных символов 

сі = сді [ ' сІЪ ' ] . дзиЬ (/ [ Л а-гА-20-9_-] /, "") 

Теперь, используя извлеченные имя базы данных и запрос, нужно подключиться к базе данных, и тут 
возникает вопрос, каким типом базы данных воспользоваться. Я уже решил использовать базу данных на основе 
5<ЗІ_ (поскольку это уже стало распространенным стандартом при разработке веб-приложений). Для нашего 
приложения я решил воспользоваться базой данных 5<ЗІ_ под названием ЗСЗІЛе. 

5<ЗЫ(:е является весьма перспективной реализацией базы данных 5(ЗІ_, обладающей невероятной 
легковесностью и быстротой работы. Ради простоты и скорости работы в ней пришлось пожертвовать такими 
понятиями, как пользователи, роли и полномочия доступа. Для нашего приложения она подходит как нельзя 
лучше. 5<ЗІ_И:е работает, запускаясь из одного файла на вашей системе, поэтому у вас может быть столько баз 
данных, сколько имеется файлов. Кроме быстроты работы, 5(31Ле служит быстрым и простым способом установки 
базы данных для простых приложений или проведения тестирования. ЗС^Ше даст все, что нужно, избавляя от 
необходимости устанавливать большие базы данных (такие как Му5<31_, Ро5ІдгеЗ<ЗІ_ или Огасіе). 

Все исследованные мной языки (РегІ, РНР, РуІІпоп и ВиЬу) тем или иным способом поддерживали ЗС^ШІе: 

• В РегІ имеется модуль ЭВЭ: :5(2ІЛ:е. Этот модуль особенно примечателен, поскольку разработчики решили 
полностью реализовать спецификацию ЗСЗІЛе внутри самого модуля, а это значит, что для доступа к базе 
данных и ее запуска не требуется никаких дополнительных загрузок. 

• РНР 5 имеет встроенную поддержку ЗСЗІЛе. К сожалению этот язык поддерживает только ЗСЗІЛе 2 (который 
вполне подойдет для некоторых приложений), но чтобы получить полную совместимость между 
различными кодовыми основами, вместо этого нужно установить библиотеку РНР 5<ЗІ_і1:е 3. 

• И РуШоп и РиЬу имеют библиотеки 5<ЗІ_і1:е, которые становятся доступными при официальной установке 
ЗС^Шіе. У РуШоп 2.5 есть поддержка ЗСЗІЛе, встроенная прямо в язык (но я не решился ее использовать из- 
за ее относительной новизны). 

Я настоятельно рекомендую, чтобы в каком-нибудь из своих небольших проектов вы исследовали 
применение 5<31_И:е. Это будет отличным способом его подготовки и запуска, если вам не нужны издержки 
установки большой базы данных. 

Способ подключения к базе данных ЗСЗІЛе во всех языках практически одинаков. Все они требуют для 
этого выполнить два шага: во-первых, включить в код библиотеку ЗС^Шіе (предоставляющую универсальные 
функции подключения), и во-вторых, подключиться к базе данных и запомнить это подключение для дальнейшего 
использования. 

В листинге 13.3 показано, как это делается в РиЬу. 

Листинг 13.3. Импорт внешней библиотеки ЗСЗІЛе и подключение к базе данных в РиЬу-версии серверного 

кода 

# Импорт внешней ЗОЬібе-библиотеки 
гедиіге 'гиЬудешз' 

гедиіге деш ' здІібеЗ-гиЪу ' 

# Далее в программе ...; 


# 'б' нужно очистить, чтобы гарантировать отсутствие зловредных символов, 

# предоставленных вместе с именем файла базы данных 



256 


<3 = сді [ ' сІЪ ' ] .дзиЪ (/ [ л а-гА-20-9_-] /, "") 

# Подключение к базе данных ЗОЬібе, которая является простым файлом 

# '3' содержит имя базы данных — 'мікі' 

сіЬ = ЗОЬібеЗ ::БабаЪазе.пем('../../баба/' + б + ' . 6Ь' ) 

Теперь, имея открытое подключение к базе данных 5<ЗІ_і1:е, мы можем выполнить запрос, отправленный со 
стороны клиента, и получить результаты. 

Выполнение и форматирование 5<2І_ 

После того, как подключение к базе данных открыто, мы можем выполнить 5<ЗІ.-запрос. Конечная цель 
заключается в возможности поместить результаты запроса в форму, которая может быть легко преобразована в 
150І\І-строку и возвращена клиенту. Наипростейшей удобной формой для ЗС^Ь-результатов является массив хэшей, 
который выглядит подобно коду, представленному в листинге 13.4. Каждый хэш представляет соответствующую 
строку базы данных. Каждая пара хеша ключ-значение представляет имя столбца и его значение в строке. 

Листинг 13.4. Пример ІЗОІМ-структуры, возвращенной с сервера 


[ 

{ 

бібіе: "НошеРаде", 
аиббюг: "бобт", 

сопбепб: "Иеісоте бо ту мопбегбиі мікі!", 
бабе: "20060324122514" 

}, 

{ 

бібіе: "Тезб", 
аиббюг: "Апопушоиз", 
сопбепб: "Ьогеш ірзиш боіеш...;", 
бабе: "20060321101345" 

}, 


] 


Сложность помещения 5<ЗІ.- результатов в желаемую структуру варьируется в зависимости от выбранного 
вами языка. Но в большинстве случаев ЗСф-библиотека возвращает две вещи: массив имен столбцов, и массив 
массивов, содержащий все данные строки (см. листинг 13.5). 

Листинг 13.5. Структура данных, возвращенная в результате выполнения ЗС^Ь-запроса информации о 
правке, внесенной в ѴѴІкі, выраженная на языке ИиЬу 

гомз. соіитпз = [ "бібіе" ,"аиббюг","сопбепб","бабе"] 


гомз = [ 

["НошеРаде","боЬп", "Иеісоте бо шу мопбегбиі мікі !","20060324122514"], 
["Тезб" , "Апопушоиз", "Ьогеш ірзиш боіеш...; ", "20060321101345"] , 


] 
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Процесс преобразования 5<ЗІ--результатов, представленный в листинге 13.5, чтобы они больше походили 
на структуру данных, показанную в листинге 13.4, может быть более интересным. По существу, нам нужно 
осуществить последовательный перебор всех соответствующих строк, создать временный хэш, заполнить его 
всеми данными столбцов, а затем добавить новый хэш в глобальный массив. В листинге 13.6 показано, как это 
делается в КиЬу. 

Листинг 13.6. Как в ВиЬу выполняется 5С)І--оператор, и результаты его работы помещаются в 
окончательную структуру данных (названную г) 

# Если в зді есть возвращаемые строки (например, выполнялся оператор ЗЕЬЕСТ) 
сІЪ.диегу( зді ) сіо | гомз 

# Проход по всем возвращенным строкам 
гомз.еасЪ. <Зо | гоѵг | 

# Создание временного хэша 
Стр = {} 

# Вывод столбцов массива в пары хэша ключ-значение 
бог і іп 0 .. гомз. соіитпз . ІепдСЬ-І 

Стр [гомз. соіитпз [ і]] = гом[і] 

епсі 

# Добавление строки хэша к массиву найденных строк 
г.ризЬ Стр 

епсі 

епсі 


Теперь, после того как у нас есть удобная конечная структура данных, мы можем приступить к ее 
преобразованию в строку 15014. По своей сути, 150Ы является способом представления значений (строк и чисел), 
массивов значений и хэшей (пар ключ-значение), использующим 1аѵа5сгір1-совместимую объектную запись. 
Поскольку мы позаботились о гарантии отсутствия в структуре данных всего, кроме массивов, хэшей и строк, все 
это можно легко преобразовать в строку 15014-формата. 

Все языки сценариев, используемые нами для этого приложения, имеют реализацию 15014-сериализации 
(которая воспринимает исходную структуру данных и конвертирует ее в 15014-строку), что нам, собственно, и 
нужно. Кроме того, поскольку вывод очень легок, как и большинстве случаев, связанных с данными формата 
15014, его очень просто вывести на браузер. Кстати, реализации на разных языках в конечном счете очень похожи 
друг на друга, что значительно упрощает процесс перехода с одного языка на другой: 

• Каждая реализация доступна в форме библиотеки или модуля. 

• Каждая реализация способна транслировать исходные объекты языка (например, строки, массивы и хэши). 

• Каждая реализация облегчает получение строки объекта формата 15014. 

Но все же в КиЬу реализация 15014-сериализации сделана особенно элегантно. Вот как выглядит пример 
преобразования объекта в 15014-строку (после загрузки библиотеки 15014) и возвращения ее клиенту: 

# Преобразование объекта (г) в ДЗОІІ-строку, и ее вывод 
ргіпб г.Со і зоп 

Я настоятельно рекомендую просмотреть код серверной реализации на вашем любимом языке, и 
разобраться, как он обрабатывает 5<ЗІ_-запросы и проводит 15014-сериализацию. Я думаю, что вы будете приятно 
удивлены тому, насколько все это просто. 
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Обработка 25014-ответа 

Теперь у нас есть ответ, полученный с сервера, который содержит отформатированную 150І\І-строку. 
Возвращаясь к листингу 13.2 теперь можно написать код, необходимый для обработки и выполнения этого 150ІМ- 
кода. Чем хорош 150ІМ, так это простотой выполнения и перемещения по его элементам. Здесь не нужен 
полнофункциональный парсер (как при работе с ХМЬ); все, что нужно вместо этого — функция еѵаІ() (которая 
выполняет код ІаѵаЗсгірІ:, чем, собственно, и является 150Ы-строка). В листинге 13.7 показано, что библиотека 
]<3иегу, полностью берет все это на себя. Все, что для этого нужно сделать — это определить тип данных 
(названный ЬаіаТуре) как «двоп», и вы немедленно получите 150І\І-данные с сервера. 

Листинг 13.7. Получение результатов с сервера и отправка структуры данных ІаѵаЗсгірІ функции 
обратного вызова 

// Отправка запроса на сервер 
$ ^ах ({ 

// РОЗТ к АРІ ГОЬ 
буре: "РОЗТ", 
игі : аріЦРЬ, 

// Сериализация массива данных 
баба: $.рагаш(р), 

// Ожидается возвращение данных в формате ИЗОЛ 
сІабаТуре: "]зоп", 

// Ожидание успешного завершения запроса 

// Если пользователь определил функцию обратного вызова, 

// отправить ей данные 
зиссезз: саІІЬаск 

}) ; 


Если вы заметили, последним совершаемым действием в листинге 13.7 было выполнение функции под 
названием саІІЬаск (которая указывает на ту функцию обратного вызова, которая предоставлена функции 
здІЕхес). Единственным аргументом, передаваемым этой функции является полная структура данных, так 
тщательно выстроенная на сервере и выставленная клиенту. Чтобы понять, как работает полный технологический 
процесс зцІЕхес-Аіах-ответ, посмотрите на показанную в листинге 13.8 упрощенную версию всего, что реально 
происходит в ѵѵікі. Логика состоит в том, что если для страницы есть правка, то должна быть показан ее самый 
последний вариант. А если правки не существует, форма должна быть отображена так, чтобы пользователь мог 
создать новую правку. 

Листинг 13.8. Упрощенная форма кода, используемого на стороне клиента для извлечения правки с 
сервера и отображения ее на веб-сайте 

// Запрос всех правок для текущей иікі-страницы 
// После загрузки возвращение данных функции 'Іоасіесі' 
зяІЕхес ( "зеіесб" , [$з] , Іоасіесі); 

// Обработка ЗОЬ-результатов, возвращенных с сервера 
бипсбіоп Іоасіесі (зя1) { 

// Если для этой иікі правка существует 
іб ( здІ.ІепдбЬ > 0 ) { 
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// Показать иікі-страницу 
зАомСопСепб () ; 

// Представление правки с использованием бехбііе 
$ ("#сопбепб") . ЬСтІ (СехбИе ( зді [ 0 ] . сопТепб) ) ; 

// Включение возможности редактирования содержимого правки 
$ ("Техбагеа") . ѵаі ( зяі [0] .сопПепП ); 

// А если правки не существует, показать форму 'сгеабе ше' 
} еізе { 

// Отображение исходной формы для редактирования 
зЬомВогт(); 

} 

} 


Важной частью кода, показанного в листинге 13.8, является краткий фрагмент 1ех1іІе(5дІ[0].соп1:еп1:), 
который выхватывает ѵѵікі-правку из структуры данных и запускает для его обработки систему форматирования 
Техіііе. Многое в НТМ1_ зависит от оформления содержимого, чем как раз и занимается ТехІІІе. Это очень простое 
средство, предоставляющее базовое, вполне понятное форматирование для любых случаев. Пример Техіііе- 
форматирования показан на рис. 13.3. 

НотеРаде 


Сопіепі: _ 

ТЬіз (ѵікі) із (ЛезідпесІ Ео зегѵе аз ап ехатріе оі ѵЬаЕ сг 
ЛаѵазсгірЕ апсі а зшагЫу ѵгіЕЕеп сіабаЬазе АРІ. 

Тгуіпд а Ііпк (ЬЬЪр://еіоЬп.огд/ зотеѵЬеге] еізе. 

Ьогет ірзит «Іоіог зіЕ атеЕ, сопзесЕеЕиег асіірізсіпд еІіЕ. 
осііо. ІпЕедег а егоз. Ѵіѵатиз ті пипс, сіідпіззіт таЕЕіз, 
зіЕ атеЕ, аидие. ЕЕіат сопдие. 8е<3 агси апЕе, розиеге ей, 
теЕиз . Ыиііа ЕегтепЕшп <1иі іп Ееііиз. Оиіздие иІЕгісіез г 

1 івів ^рН пите 1 дгпв тяІРчмдНд «пНяІ р« рп 


Рис. 13.3. ѴѴІкі-правка, использующая Техіііе-форматирование 


Но одной из привлекательных сторон ТехІІІе является то, что кто-то уже выполнил всю трудную работу, и 
создал библиотеку Техіііе ІаѵаЗсгірі, которая способна превращать отформатированный Техіііе текст в итоговый, 
презентабельный НТМІ_. Более подробная информация о ТехІІІе может быть найдена на следующих веб-сайтах: 


• Обзор ТехІІІе: Ы:1:р://ѵѵѵѵѵѵ.Іехіізт.сот/іооіз/іехііііе/ 

• ІаѵаЗсгірі-реализация Техіііе (использованная в этом проекте): МИр://)гт.сс/ех1га5/Ііѵе-іехіііе-ргеѵіеѵѵ.рМр 

Теперь, когда данные вернулись с сервера отформатированными и вставленными в документ, у вас есть 
все необходимое для полноценной ѵѵікі-системы. С этого момента я рекомендую вам установить свою собственную 
копию ѵѵікі-кода и посмотреть его в работе. Он подробно откомментирован, поэтому с ним можно будет легко 
справиться, не испытывая каких-либо стрессов. 

Дополнительный учебный пример: Заѵабсгірі блог 

Если вы интересуетесь тем, что еще может быть сделано с помощью этой связки клиент-сервер-5С2ІЛ:е, то я 
создал еще одну демонстрационную программу, которую вы можете совершенно свободно изучить. Это 
приложение представляет собой простой, персональный браузерный блог. Тем не менее он очень удобен; при 
посещении страницы вы получаете свой собственный персональный блог, который вы можете просматривать и 
вести. Кроме этого, в нем есть настоящий предварительный просмотр публикации и небольшая ЗСф-консоль, с 
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которой будет интересно познакомиться. Код вместе с демонстрационным блог-приложением находится на веб¬ 
сайте книги (ЬирѴ^'зрго.огд/). Копия экрана работающего блога показана на рис. 13.4. 


Му ]аѵа$сгірі ВІод 


’ЛсІсогг* іо ту іѵѵаіслрс-ромегні Ыод! ТЬа Ыод епдіпе «мае імпКеп ингд 

поОипв Ьиі Іаѵаослрі. ТЪе Ьвскепо а *ихі а ІЬт ргаку Іо л ЗДліе йаіаЬвхе. 




Теві 

Іягет свит йо4ог іК атеі, сопхесІЛыег абрзага еі*. Оиікціе іийих 
іетри* ск9ёо. Іпіедег а его* Ѵеѵатоз ті липе. одппят т*№&. еіетепіит 
199*, аіідиат яі атас, а иди* Етлт гопдир. 5еб агси апи», росиеге ей, 
риіѵіпаг <3. рог* а іс. теіих. Ми Іа Гегтепіит биі іп ІеЬих. Оиіиуие иііпсіех 

Теіі 

иэгегп свит йЫог х* атеі, сопхссісіиег аврзапд еік. флхрие Іисіих 
іетрих ойю Іпіедег а его* Ѵгѵатиз ті пипс. лдгпят таких, еіетепіит 
едет, а1к)иат яі атас, аидие Еііат сопдие 5еб агси апіе, рохоеге аи, 
риіѵіпаг «3, рссіа ю, теіих МиЙа Гспг.спіит виі іп іейих флыуцс иіігсісх 

Тей 

Югет свит ОЫог хК атеі, сопхесісіисг жіфхапд еіг Оиіхоие Іисіик 
іетрих ойю Іпіедег а егоз. Ѵгѵатих ті пипс, відгпят таССіз, еіетепіит 
едет. аік)иат яі атас, аидиа Еі*т сопдие 5ао агси апіе, рохиеге аи, 
риіѵіпаг <3. рогіа »<з, теіих. Ни 4а івгтвпіит вді іп ІеВиь Оиіхоие иііпсіех 
пи Іа 5сй пиіа ѵиіриіаіе Гааіз» 5еб ригих іасиь таіехиава ѵСае, ховаіех ей, 
(ідппѵт ѵСае. вал. Аепаап Іисіих Гаиобих егаі. ИіавеИих ІеЙх »ео. ѵіѵеггв 
поп, ЬЪапОит ГасШб, тздие диіх, рогиѵ 5ихреп<н«е ѵаі пеоие 5аО іесіих 
егаС, сопхедиа* див, Пепвгег* пес, еиіхтоб поп, диат. Оопес ес тадпа. 

Леісоте Ю Уоиг РекопаІ ВІод! 

ты* мод К бехідпет) іо хегѵе ав ап ахапчие сс ѵ»паі сап ье аске»ѵеб пгсь 
Іаѵахопрс ап о а хтагсіу ѵхЛМеп ОаіаЬахс АР! 


Ьогет Ірвит 


иэгет свит Ооіог хе атеі, сопхесіеіиег аеіеххапд еШ. Оиедив Іисіик 
іетрих осію Іпіедег а егох. Ѵгѵатих ті пипс. Одпвят таких, еіетепіит 
едек, аіЮиат яі атас, аидиа Еііат сопдие 5еб осей апіа, рохиеге «, 
риіѵіпаг <С, роста кз. теіих. Ыиіа Гегтепіит <Хі\ Іп ГеЯих Оиіхоие иііпсіех 
пиіа хеб пиМ ѵиіриіаіе Гааіаіх. 5еб ригих Іасих, таіехиава ѵвае. ховаіех < 
ддпвхт ѵеае. езі Аепеап Іисіих ГаиоЬих егаі. РііаэеИих Іеііх іео. ѵіѵегга 
поп, ОЬапйит Гасй^5, т^-оие оиі», риги$ 5иязап0іма ѵаі паоиа 5аб »есі 
•гас, соп ходи ас дик, ПапОгеге пае, оиіхтоб поп, диат. Оопсс ес тадпа. 


Рис. 13.4. Копия экрана браузерного блога и 5(ЗІ_-консоли 

Код приложения 

Обучающий пример, представленный в этой главе намного сложнее, чем только что 
продемонстрированный. В этом разделе приводится подробный исходный код, необходимый для запуска нашего 
приложения (который имеет непосредственное отношение ко всему, что рассматривается в этой главе). 

Теперь посмотрим на список файлов, необходимых для приведения в действие нашего ѵѵікі-приложения. 
Он представляет собой сборник кода клиентской и серверной сторон, рассмотренного в этой главе, дополненный 
различными библиотеками и файлами стилей, которые в ней напрямую не упоминались: 

• іпсівх.іііті-. Главная страница приложения, в которой собран воедино весь код клиентской стороны. 

• іпзіаІІ.ІіітІ: Главный установочный файл, который запускается перед первым использованием 
приложения. 

• С5з/5іу1е.с55\ Стилевое С55-оформление для клиентской стороны приложения. 

• із/тікі.із (см. листинг 13.9)\ Основной код ІаѵаЗспрІ, отвечающий за привязку событий и запуск 5<ЗІ_- 
запросов. 

• _/5/5д/._/5 (см. листинг 13.10): Код, отвечающий за связь с сервером, извлекающий 150І\Гданные, 
возвращаемые 5(ЗІ_-запросами. 

• із/іехіііе.із: Копия библиотеки ІаѵаЗсгірІ Техіііе (для преобразования текста в НТМ1_): 
Ыірі/^'гт.сс/ехігаз/ііѵе-іехіііе-ргеѵіеѵѵ.ріпр. 





• ]з/]циегу.]5\ Копия текущей версии ]<3иегу: Іпіііір :иегу.сот/. 

• ар//: Основной серверный код, отвечающий за преобразование результатов 5<ЗІ_-запроса в 150И и 
возвращения их клиенту. Этот каталог содержит все версии когда: на РегІ, РНР, РуХНоп и РиЬу. Я уже 
включил копию РиЬу-версии кода в листинг 13.11. 

• сІаіа/ѵѵікі.сІЬ: База данных 5<ЗЫ1:е, в которой хранится ѵѵікі. 

Полный код файлов этой главы приведен в следующих листингах. 

Основной код ЛаѵаЗсгірі 

В листинге 13.9 показан ѵѵікідз, основной код ІаѵаЗсгірІ, отвечающий за привязку событий 
взаимодействие с пользователем. 

Листинг 13.9. ^з/ѵѵікі.]5 

// Получение имени текущей страницы 
ѵаг $5 = иіпсіом . ІосаТіоп . зеагсП; 

$5 = $з.зиЪзбг(1,$з.ІепдТП) ; 

// Определение, предоставлен ли номер правки, и если 
// предоставлен, то запомнить его ІБ 
ѵаг $г = Хаізе; 

// Правки предоставляются в формате 
// ?ТіТ1е&К.еѵізіопІВ 
ѵаг Тшр = $з.зрііТ ("&") ; 
іб ( Стр. ІепдТЪ. > 1 ) { 

$ з = Стр[ 0 ] ; 

$г = Ттр[1]; 

} 

// Если страница не предоставлена, переход на начальную страницу 
ІХ (!$з) міпсіои. ІосаТіоп = "?НошеРаде"; 

// Установка имени базы данных 
ѵаг сІЪ = "мікі"; 

// Нужно дождаться окончания загрузки БОМ 
$ (сІоситепТ) . геабу (Еипсбіоп () { 

// Установка заголовка страницы 
сіоситепк. Тібіе = $з; 

$ ( "Ы ") . ПТшІ ($з) ; 

// Загрузка всех мікі -правок 
геіоаб () ; 

// Если произведен щелчок на ссылке 
// 'есііі; раде' (редактировать страницу) 

$ ( " #е<3ік" ) . сііск (зкоѵ/Еогш) ; 
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// Когда пользователь отправляет новую правку 
$ (" #розб богт") . зиЪтіб ( бипсбіоп () { 

// Получение имени автора 

ѵаг аибЬог = $ ("#аи'Ыіог") .ѵаі () ; 

// Получение текста 

ѵаг бехб = $ ("#бех1:") .ѵаі () ; 

// Отображение содержимого 
$ ("#сопбепб") . Ъбті (бехбііе (бехб) ) ; 

// Предоставление времени текущей правки 
// (которое поможет ее выделению) 

$г = (пей Бабе()). дебТіше (); 

// Вставка правки в базу данных 

зяІЕхес ( "іпзегб" , [$з,аибЬог,бехб,$г], геіоаб) ; 

гебигп баізе; 

}) ; 

// Если пользователь щелкнул на ссылке ' сапсеі' (Отмена) 
// внутри области редактирования 
$("# сапсеі" ). сііск ( зПомСопПепб) ; 

}) ; 

// Отображение текущей версии правки 
бипсбіоп зЬомСопбепб() { 

// Отображение ссылки на редактирование 
$ (" #есііб, # сапсеі" ) . сзз ( "сіізріау" , "іпііпе" ) ; 

// Скрытие область редактирования 
$ ("#розб") . Пісіе () ; 

// Отображение содержимого 
$("#сопбепб").зЬом(); 
гебигп баізе; 

} 

// Отображение формы редактирования текущего варианта правки 
бипсбіоп з1іомРогш() { 

// Скрытие ссылки на редактирование 
$ (" #ебіб" ) . Пісіе () ; 

// Отображение области редактирования 
$("#розб").зЬом(); 
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// Скрытие содержимого 
$ (" #сопбепб") . Нібе () ; 
гебигп баізе; 

} 

// Загрузка всех правок из базы данных 
бипсбіоп геіоаб(б) { 

// Запрос всех правок 

здІЕхес ( "зеіесб" , [$з], бипсбіоп ( зді ) { 

// Если для этой мікі-страницы существуют правки 
іб ( зді . ІепдбН > 0 ) { 

іб ( !$г ) $г = зд1[0].бабе; 

// Отображение мікі-страницы 
зкомСопкепб(); 

// Отображение всех правок 
$ ("#зібе иі") . Ьбші (''); 

// Проход по всем правкам 

бог ( ѵаг і = 0; і < здІ.ІепдбП; і++ ) { 

// Если эта правка является текущей отображаемой правкой 
іб ( зд1[і] .бабе == $г ) { 

// Отображение правки 

$("#сопбепб").Пбші(бехбііе(зді[і].сопбепб)); 

// Включение возможности редактирования 
// содержимого правки 
$("бехбагеа").ѵаі( зді[і].сопбепб ); 


} 

// Получение реального объекта данных 
ѵаг б = пей Бабе ( рагзеіпб(зді[і] .бабе) ); 

// Определение, была ли правка сделана в течение 
// последних суток, или нет 

іб ( б.дебТішеО > (певд Бабе () ) . дебТіше () - (3600 * 24000) ) 

// Если да, формирование приемлемого отображения 
// времени создания в формате аш/рш 
б = б.дебНоигзО >= 12 ? 

(б. дебНоигз () != 12 ? б.дебНоигзО - 

+ " рш" : 

б.дебНоигзО + " аш"; 


12 : 12 ) 
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//В противном случае отображение месяца и дня 
// правки 
еізе { 

ѵаг а = <3. боЦТСЗбгіпд () . зрііб (" "); 

<3 = а [2] + " " + З.дебБабеО; 

} 

// Добавление правки в список правок 
$("#зіЗе иі" ).аррепЗ( "<1і с1азз='" + 

( $г == зд1[і] .Забе ? "сиг" : "" ) 

+ "'Ха Ьгеб=' ?" + $з + ( і > 0 ? 

+ зяі [ і ].Забе : "" ) 

+ + 3 + "</а> Ьу " + зді [ і ].аиббюг + "</1і>"); 

} 

// В противном случае эта страница правке никогда не подвергалась 
} еізе { 

// Отображение этого обстоятельства на панели правки 
$("#геѵ") . Ьбші ( "<1і>І\Іо Веѵізіопз . </1і>" ) ; 

// Скрытие элементов управления редактированием 
$ ( "#еЗіб, #сапсеі" ) . ЫЗе () ; 

// Отображение исходной формы редактирования 
збюмЕогт (); 

} 

}) ; 

} 

^ѵаЗсгірі 5(2І_-библиотека 

В листинге 13.10 показан файл зяідз, в котором содержится код, отвечающий за связь с сервером и 
извлечение 150І\І-данных, полученных на основе 5<ЗІ.-запросов. 

ЛИСТИНГ 13.10. ]5/5ДІд5 

// ЭТА ПЕРЕМЕННАЯ ТРЕБУЕТ ОБНОВЛЕНИЯ 

// ІЖІ., по которому находится сценарий на стороне сервера 
ѵаг арЮКЬ = "арі/гиЬу/"; 

// Некоторые заданные по умолчания глобальные переменные 
ѵаг здІЬоаЗеЗ = бипсбіоп (){} 

// Обработка больших ЗОЬ-отправлений 

// Эта функция способна отправлять большие объемы данных 
// (например, большие вставки — ШЗЕВ.Т) , но она может 

// отправлять данные только на тот же сервер, с которым работает клиент 
бипсбіоп зд1Ехес(д, р, саІІЬаск) { 


// Загрузка всех параметров в структурированный массив 
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бог ( ѵаг і = 0; і < р.іепдбіі; і++ ) { 

р[і] = { паше: "агд", ѵаіие: р[і] }; 

} 

// Включение имени базы данных 
р.ризЬ({ паше: "сІЪ", ѵаіие: сіЬ }); 

// и названия ЗОЬ-запроса, который нужно выполнить 
р.ризЬ({ паше: "зді", ѵаіие: д }); 

// Отправка запроса на сервер 

$.а^аx ({ 

// РОЗТ к АРІ ШЬ 
буре : "РОЗТ", 
игі: аріИКі, 

// Сериализация массива данных 
баба: $.рагаш(р), 

// Ожидается возвращение данных в формате 630Ы 
бабаТуре: "]зоп", 

// Ожидание успешного завершения запроса 

// Если пользователь определил функцию обратного вызова, 

// отправить ей данные 
зиссезз: саІІЬаск 

}) ; 

} 

КиЬу-код на стороне сервера 

Следующий код, показанный в листинге 13.11, представляет серверную часть А]ах-кода ѵѵікі-приложения. 
Этот код целиком написан на языке программирования КиЬу. Примеры такого же кода, но написанного на РНР, 
РегІ или РуІИоп, можно найти на веб-сайте Ы1;р://]5рго.огд/. 

Листинг 13.11. Серверная часть кода ѵѵікі-приложения, написанная на языке киЬу 

#! /изг/Ьіп/епѵ гиЬу 

# Импорт всех внешних библиотек 
гедиіге ' сді ' 

гедиіге 'гиЬудешз' 
гедиіге дет ' здІібеЗ-гиЬу ' 
гедиіге '^зоп/оЬ^есбз' 

# Отображение заголовка баѵазсгірб 
ргіпб "Сопбепб-буре: бехб/^аѵазсгірб\п\п" 

# Инициализация переменных приложения 


егг 


II II 
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г = [] 

сді = ССІ.пей 

# Перехват параметров, переданных пользователем 
саіі = сді [' саІІЬаск '] 

зді = сді['зді'] 

# Получение от пользователя имени базы данных, 

# и обеспечение отсутствия в них злонамеренно 

# вставленных символов 

сі = сді [ ' сІЪ ' ] .дзиЬ (/ [ А а-гА-20-9_-] /, "") 

# Если имя базы данных не предоставлено, использовать имя 'кезк' 
ік сі == ' ' кііеп 

сі = "кезк" 

епсі 

# Получение списка параметров, помещаемых в 

# ЗОЬ-запрос 

агдз = сді .рагашз['агд'] 

# Воспринимаются только два различных ЗОЬ-запроса 

# Вставка новой мікі-правки в базу данных 
ік зді == "іпзегк" кііеп 

зді = "Ш8ЕК.Т ШТО мікі ѴАШЕЗ (?,?,?,?); " 

# Получение всех правок мікі-записи 
еізіі зді == "зеіеск" кЬеп 

зді = "ЗЕЬЕСТ * ЕВОМ иікі ШЕКЕ бік1е=? ОВБЕВ ВУ баке БЕЗС;" 

# В противном случае, отказать в запросе 
еізе 

зді = "" 

епб 

# Если запрос был предоставлен 
іі зді ! = ' ' кііеп 

# Проход по всем предоставленным параметрам 
ког і іп 0 .. агдз. 1епдкіі-1 

# Замена всех одиночных кавычек на '' (что эквивалентно их 

# дезактивации в ЗОЬіке) , и дезактивация всех знаков ? 
агдз[і] = агдз[ і ].дзиЬ(/'/, "''").дзиЬ(/\?/, "\\?") 

# Затем проход по ЗОЬ-запросу и замена первого соответствующего 

# знака вопроса данными параметров 
зді = зд1.зиЬ(/( [ л \\] )\?/, "\\1"' 


+ агдз[ і ] + 


II I II 
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епсі 

# После того, как все сделано, снятие дезактивации со знака вопроса 
5ЯІ = 5ЯІ .дзиЪ(/\\\?/, "?") 

# Обеспечение захвата всех выдаваемых ошибок базы дынных 
Ьедіп 

# Подключение к базе данных ЗОЬібе, представляющей 

# собой простой файл 

сіЬ = ЗОЬібеЗ :: БабаЪазе . певд /баба/ ' + сі + ' . сіЬ ' ) 

# Если в зді есть возвращаемые строки 

# (например, выполнялся оператор ЗЕЬЕСТ) 
бЪ.диегу( зді ) бо | гомз 

# Проход по всем возвращенным строкам 
гомз.еасЬ. бо | гом 

# Создание временного хэша 
бшр = {} 

# Вывод столбцов массива 

# в пары хэша ключ-значение 

іог і іп 0 .. гомз. соішппз .1епдбП-1 
бшр[гомз. соішппз[і] ] = гом[і] 

епб 

# Добавление строки хэша к массиву найденных строк 
г.ризП бшр 

епб 

епб 

гезсие Ехсербіоп => е 

# Если произошла ошибка, запоминание сообщения 

# для использования в будущем 
егг = е 

епб 

еізе 

# Если ЗОЬ-запрос предоставлен не был, отображение ошибки 
егг = "Запрос не предоставлен." 

епб 

# Если произошла ошибка, возвращение хэша, содержащего 

# ключ еггог и значение, содержащее сообщение об ошибке 
і Д егг != '' бЬеп 

г = { "еггог" => егг } 

епб 

# Преобразование возвращенного объекта в Д30І\І-строку 
^иб = г.бо^зоп 
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# Если предоставлена функция обратного вызова 
і 1 саіі != 11 СЬеп 

# Помещение возвращаемого объекта в строку обратного вызова 
ргіпб саіі + "(" + доиб + ")" 

еізе 

# В противном случае простой вывод ИЗОПІ-строки 
ргіпб доиб 

епсі 

Вывод 

Я надеюсь, что при изучении нашего приложения вам удалось усвоить ряд полезных вещей. Во-первых, 
что ]50Ы является мощной и жизнеспособной альтернативой использованию ХМІ_ в веб-приложениях. Во-вторых, 
сохраняя насколько это возможно простоту кода на серверной стороне, вы можете дать программе 
пользовательского интерфейса больше возможностей управления пользовательскими данными (и это надо делать 
умеренно, сохраняя в скрытом состоянии наиболее важную часть логики действия). И наконец, что все 
современные языки сценариев, используемые на стороне сервера могут вести себя весьма похожим образом 
(поскольку обладают многими сходными чертами) и с их помощью сравнительно легко осуществлять загрузку и 
извлечение информации (поэтому я и написал идентичные версии кода серверной стороны на четырех наиболее 
популярных языках сценариев). 

Весь код основного приложения может быть найден в разделе «Код приложения» этой главы. Полная 
установочная версия приложения может быть найдена на веб-сайте этой книги ИНрУ^зрго.огд/, или на веб-сайте 
бир://ѵѵѵѵѵѵ.арге55.сот/, дополненном подробной инструкцией по установке. Работоспособная демонстрационная 
версия может быть найдена по адресу: Иіііір://дзрго.огд/сІето/ѵѵікі/. 

Этот веб-сайт включает полноценные инструкции по использованию кода. Кроме этого, там же 
организован форум для обсуждения любых проблем, с которыми вы можете столкнуться при попытке создать свою 
собственную установку. 
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Глава 14 В каком направлении движется ЗаѵаВсгірІ? 

За последнюю пару лет с многих направлений появилось огромное количество разработок на языке 
ІаѵаБсгірі. МоііІІа РоипбаНоп значительно продвинулась в повышении качества языка ІаѵаБсгірІ:, согласовав его с 
ЕСМАЗсгірі: 4 (языком, на котором основан ІаѵаЗсгірІ). С другого направления действовала рабочая группа ѴѴНАТ- 
ѴѴО, объединившая усилия производителей веб-браузеров, желающих разрабатывать новые технологии, 
позволяющие создавать и развертывать приложения всемирной паутины, которая разработала спецификацию для 
следующего поколения приложений, основанных на использовании браузеров. И наконец, авторы библиотек и 
корпорации работали над укреплением технологий потоковых браузерных приложений в средство под названием 
Сотеі. Все эти новинки представляют будущее языка ІаѵаЗсгір! и браузерных приложений. 

В этой главе мы собираемся рассмотреть усовершенствования, появившиеся в ІаѵаЗсгір! 1.6 и 1.7, которые 
приближают выпуск ІаѵаЗсгірІ: 2.0. Затем мы рассмотрим одно из усовершенствований, созданных в рамках 
спецификации ѴѴеЬ АррІісаіііопз 1.0: возможность рисования с использованием ІаѵаЗсгірІ. В заключение мы 
рассмотрим накоротке замысел, положенный в основу Соте! и потоковых веб-приложений. 

2аѵа5сгірі 1.6 и 1.7 

С начала текущего десятилетия язык ІаѵаЗсгірі медленно продвигался вперед, добавляя в свой арсенал 
функциональные усовершенствования. Хотя многие современные браузеры поддерживают ІаѵаЗсгірІ 1.5 (или его 
эквивалент), они крайне слабо продвигают этот язык вперед. 

Брендан Эйч (Вгепбап ЕісМ) и другие специалисты МоііІІа РоипбаНоп, усердно работали над продвижением 
языка во взаимодействии с ЕСМАЗсгірі 4. Более подробная информация о работе МоііІІа могут быть найдены в 
следующих источниках: 

• Работа МоііІІа над 4аѵа5сгірі\ ЬССр ://ѵѵѵѵѵѵ.тогіііа .огд/)5/1апдиаде/ 

• Предложения МоііІІа по 4аѵа5сгірі 2.0: Ыір://ѵѵ\л/ѵѵ.тоііІІа.огд/)5/Іапдиаде/]520/ 

• Предложения МоііІІа по ЕСМАЗсгірі 4: НИр://ѵѵѵѵѵѵ.тоііІІа.огд/]5/Іапдиаде/е54/ 

Не дожидаясь завершения ІаѵаЗсгірІ 2.0, МоііІІа посягнула на выпуск ІаѵаЗсгірІ версий 1.6 и 1.7, в 
которые включен ряд возможностей, намеченных для конечной, пересмотренной версии языка. Многие 
добавленные возможности носят весьма существенный характер, и в этом разделе мы проведем их краткий обзор. 

ІаѵаЗсгірі 1.6 

Первый выпуск обновленного языка ІаѵаЗсгірІ появился в виде ІаѵаЗсгірІ 1.6. Он был выпущен вместе с 
браузером Рігеіох 1.5, созданным МоііІІа Роипбаііоп. Краткий обзор изменений, внесенных в ІаѵаЗсгірІ 1.6 можно 
найти на веб-сайте МоііІІа: Ыір://с1еѵеІорег.тоііІІа.огд/еп/сіос5/І\Іеѵѵ_іп_1аѵа5спрІ_1.6. 

В этом выпуске появились две важные свойства: Е4Х (ЕСМАЗсгірі: для ХМБ) и набор дополнительных 
функций для работы с массивами. На данный момент ни одна из этих функций не реализована ни в одном другом 
браузере, но вполне возможно, что Орега и ЗаГагі будут следующими, кто окажется запрыгнет на борт этого судна. 
Я покажу вам те преимущества которые имеются у каждого из этих свойств. 

ЕСМАЗсгірі для ХМЬ (Е4Х) 

Е4Х добавила к языку ІаѵаБсгірІ набор новых синтаксических элементов, дающих возможности записывать 
встроенный ХМІ_ прямо внутри кода ІаѵаБсгірі. Результат получился довольно интересный, но все же весьма 
сложный. Более подробную информацию о Е4Х можно найти в его спецификации на веб-сайте МоііІІа: 


Спецификация ЕСМАЗсгірі для ХМС. М1:1:р://ѵѵѵѵѵѵ.еста-іп1:егпа1:іопаІ.огд/риЫіса1:іоп5/5І:апсІагсІ5/Еста-357.Ы:т 
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• Краткий обзор Е4Х\ Іп1:1:р://сіеѵеІорег.то2іІІа.огд/рге5еп1а1:іоп5/хІ:есІт2005/е4х/ 

В общем, спецификация позволяет вам использовать при написании кода ІаѵаЗсгірІ-подобный синтаксис, 
результаты которого выражаются в ХМІ_ БОМ. Например, если написать ѵѵгіііпд ѵаг ітд = <ітд/> + <Мг/>, то 
после элемента изображения появится горизонтальная линия, а получившийся БОМ-элемент будет сохранен в 
переменной, которой позже можно будет воспользоваться. Более сложный пример приведен в листинге 14.1. 
Получившийся ХМБ-документ показан в листинге 14.2. 

Листинг 14.1. Построение НТІЧБ-документа с использованием Е4Х, взятое из презентации Брендана Эйча 

<зсг ірС куре="бех1;/д аѵазсгірб; е4х=1 "> 

// Создание НТМЬ-элемента и сохранение его в переменной 
ѵаг Ылпі = <Ы:ш1/>; 

// Присвоение содержимому элемента СіСІе текстовой строки 
// Е4Х автоматически создает все пропущенные элементы и 
// берет на себя создание соответствующих текстовых узлов 
Ылпі .Ьеаб. бібіе = "Заголовок моей страницы"; 

// Установка свойства цвета фона для элемента Ъобу, 

// который создается автоматически 
Пбті .Ьобу.@Ьдсо1ог = "#е4е4е4"; 

//И некоторых свойств к элементу богш внутри элемента Ъобу 
Пбші .Ьобу.богш.@паше = "шубогш"; 

Пбші .Ьобу.богш. @асбіоп = "зошеигі . сді"; 

Пбші .Ьобу. богш. @шебЬосі = "розб"; 

Пбші .Ьобу. богш. Эопсііск = "гебигп зотедзО;"; 

// Создание пустого элемента іприб с определенным именем 
Пбші .Ьобу.богш. іприб [0] = 

Ь.бш1 .Ьобу. богш. іприб [0] . @паше = "кезк"; 

</ зсгірО 

Листинг 14.2. НТМБ-документ, сгенерированный вызовом Е4Х-кода из листинга 14.1 


<Ылп1> 

<ЬеасІ> 

<біб1е>Заголовок моей страницы</біб1е> 

</ЬеасІ> 

<Ьобу Ьдсо1ог="#е4е4е4"> 

сбогт паше="тубогш" асбіоп="зошеиг1 .дзз" 

теС1іос1="роз'Ь" опс1іск="гебигп зотедзО ;"> 
<іприк паше="'Сез'Ь"></іприб> 

</богш> 

</Ьобу> 

</Ы:ш1> 
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Хотя синтаксис для Е4Х довольно сильно отступает от нормального стиля ІаѵаЗсгірІ — что может быть 
достаточным, чтобы отпугнуть новичков — результат мог бы принести существенную пользу, позволяя сократить 
количество повторяющихся йОМ-операций. 

Дополнительные возможности по работе с массивами 

Самые важные новые свойства, добавленные в ІаѵаЗсгірі 1.6, относятся к работе с массивами. Теперь в 
версии 1.6 массивы приобрели несколько дополнительных методов, которые могут использоваться в обычных 
действиях: 

• Два действия, іпсіехОГ() и Іа5ІІпсіехОГ(), похожи на одноименные методы, существующие для строковых 
объектов. Они дают возможность найти позицию объекта внутри массива, возвращая соответствующий 
индекс, или -1, если объект в массиве отсутствует. 

• Три новых метода, (ЪгЕасІт(), 5оте() и тапу(), предназначены для упрощения общепринятых итераций, и 
позволяют выполнять функцию над содержимым массива, над каждым его объектом. 

• Новые функции ЯІІег() и тар() позволяют проводить встроенные преобразования массива, аналогичные 
операциям тар и дгер, существующим в других языках (например, в РегІ). 

Примеры использования всех новых функций ІаѵаЗсгірі 1.6 по работе с массивами показаны в 
листинге 14.3. 

Листинг 14.3. Примеры использования новых функций ІаѵаЗсгірІ 1.6, работающих с массивами 


// Простой массив чисел 

ѵаг Стр = [ 1, 2, 3, 4, 5, 3 ]; 

/ / іпсіехОТ ( Объект ) 

// Определяет индекс объекта внутри массива объектов 
бтр. іпбехОТ ( 3 ) == 2 
бтр. іпбехОТ ( 8 ) == -1 

// ІазбІпсіехОТ ( Объект ) 

// Определяет последний объект внутри массива объектов 
бтр. ІазбІпсіехОТ ( 3 ) == 5 

// богЕасЬ.( Функция ) 

// Вызывает функцию для каждого имеющегося в массиве объекта. 

// Функции передаются три аргумента: объект, его индекс и ссылка на массив 
бтр.богЕасН( аіегб ); 

// еѵегу ( Функция ) 

// Вызывает функцию для каждого имеющегося в массиве объекта, если для 
// каждого из них будет возвращено значение бгие, возвращает бгие 
бшр. еѵегу ( Еипсбіоп (пит){ 
гебигп пит < 6; 

}) // бгие 


/ / зоше( Функция ) 
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// Вызывает функцию для каждого имеющегося в массиве объекта. 

// Если для какого-нибудь объекта будет возвращено значение бгие, 

// возвращает бгие 
Стр .зоте (Типсбіоп (пит){ 
гебигп пит > 6; 

}) // Таізе 

// Ті1бег( Функция ) 

// Урезает массив до тех элементов, которые соответствуют определенным 
// критериям. Объект сохраняется, если функция возвращает 'бгие'. 

Стр . Тіібег ( Типсбіоп (пит){ 
гебигп пит > 3; 

}) // [ 4, 5 ] 

// тар( Функция ) 

// Преобразует массив объектов в другой набор объектов. Результат, 

// возвращенный определенной функцией, преобразует объект к его новому 
// значению 

Стр .тар( Типсбіоп (пит) { 
гебигп пит + 2; 

}) // [ 3, 4, 5, 6, 7, 5 ] 

Кроме этих простых примеров, эти новые методы придают работе с массивами в ІаѵаЗсгірі столь 
необходимую скорость и функциональность. Я конечно с нетерпением жду того дня, когда эти методы получат 
поддержку на всех браузерах. 

ІаѵаЗсгірі: 1.7 

Этот новый выпуск языка ІаѵаЗсгірі привнес в него много новых функциональных возможностей, добавив 
ряд свойств, которые приблизили его к другим полнофункциональным языкам. Кроме всего прочего, новый 
выпуск ІаѵаЗспрі 1.7, обладает еще большими усовершенствованиями, чем выпущенное ранее обновление 
ІаѵаЗсгірІ 1.6, в него добавлен ряд новых особенностей, изменяющих сам способ его работы. Подробности 
некоторых новых свойств, доступных в ІаѵаЗсгірІ; 1.7, приведены на веб-сайте 
бир://сІеѵеІорег.то2іІІа.огд/еп/сіос5/Меѵѵ_іп_1аѵа5сгір1;_1.7. 

Это обновление языка ІаѵаЗсгірІ; было выпущено вместе с новой версией браузера МоііІІа РігеГох 2.0. В 
этот браузер включена полная реализация всего, что будет рассмотрено в этом разделе, и только он обладает 
столь значительными, современными обновлениями языка ІаѵаЗсгірі. 

Включения в массив 

Одно очень интересное добавление позволяет весьма стильно и ловко писать код, относящийся к 
генерации массива. Раньше, чтобы заполнить массив списком элементов, нужно было последовательно перебрать 
набор и поместить его элементы в конечный массив. Теперь вместо этого можно воспользоваться включением в 
массив, и сделать все одним простым приемом, который поясняется на примере, показанном, в листинге 14.4. 

Листинг 14.4. Включения в массив в ІаѵаЗсгірІ; 1.7 

<зсгір1; 1:уре="арр1іса'Ьіоп/ ^ аѵазсгірб; ѵегзіоп=1.7"> 

// Старый способ помещения ряда номеров в массив 
ѵаг аггау = []; 
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бог ( ѵаг і = 0; і < 10; і++ ) { 

аггау.ризЬ.( і ); 

} 

// Новый способ 

ѵаг аггау = [ і бог ( і = 0; і < 10; і++ ) ] ; 

// старый способ помещения ключей объектов в массив 
ѵаг аггау = [] 
бог ( ѵаг кеу іп оЪд ) { 

аггау. ризк ( кеу ); 

} 

// Новый способ 

ѵаг аггау = [ кеу бог ( кеу іп оЪд ) ]; 

</зсгірб> 

Эта специфическая особенность языка некоторое время присутствовала в других языках (таких как 
РуІНоп), и приятно видеть, что она добралась и до ІаѵаБсгірІ. 

Управление областью видимости переменных (І_еІ Зсоріпд) 

І_е1 Бсоріпд — фантастическое нововведение, которое, скорее всего, получит наиболее широкое 
применение и признание. До сих пор в ІаѵаБсгірІ не было никакой области видимости на уровне блоков (что уже 
рассматривалось в главе 2). С добавлением новых Іеі-оператора, выражения и определения теперь появилась 
возможность определения различных областей видимости на нескольких различных уровнях. В листинге 14.5 
показано несколько примеров того, что можно сделать с помощью Іеі зсоріпд. 

Листинг 14.5. Примеры Іеі Бсоріпд в ІаѵаБсгірІ 1.7 

<зсгірб куре^'арріісабіоп/даѵазсгірб;ѵегзіоп=1.7"> 

// Оператор Іеб 
ѵаг безб = 10; 

Іеб( безб = 20 ) { 

аіегб( безб ); // выводится 20 

} 

аіегб( безб ); // выводится 10 

// Выражение Іеб 
ѵаг безб = 10; 

аіегб( Іеб( безб = 20 ) безб ); // выводится 20 
аіегб( безб ); // выводится 10 

// Определение Іеб 
ѵаг безб = 10; 
іб ( безб == 10 ) { 

Іеб пемТезб = 20; 
безб += пемТезб; 

} 

аіегб( безб ); // выводится 30 
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аіегб ( пемТезб ); // сбой, переменная пемТехб за пределами 
// оператора не определена 

// Использование Іеб в блоке Дог 
Дог ( ІеД і = 0; і < 10; і++ ) { 

аІегД ( і ) ; 

} 

аІегД( і ); // сбой, переменная і за пределами оператора Дог 
// не определена 

</ЗСГІрО 

Используя это простое дополнение вы можете сделать свой код понятнее, работать более эффективно и 
избежать ряда общих конфликтных ситуаций, связанных с пространством имен (большая часть всего этого будет 
работать до введения классов и пространств имен в ІаѵаБсгірІ 2.0). 

Деструктуризация 

Заключительной серьезным понятием, введенным в ІаѵаБсгірІ 1.7, является деструктуризация 
(сіезігисіигіпд). Это понятие позаимствовано из функциональных языков программирования (в частности, в Ызр), и 
позволяет иметь сложные структуры данных слева от операнда, заполненные определенными значениями. 

Более подробная информация о деструктуризации в ЕСМАБсгірІ 4 размещена на веб-сайте МоііІІа: Нйр:// 
сіеѵеІорег.то2іІІа.огд/е54/ргоро5аІ5/сіе5І;гис1;игіпд_а55Ідптеп1:.ІпІ:тІ. 

Хотя понятие деструктуризации не отличается простотой, но на то чтобы с ним разобраться безусловно 
стоит потратить некоторое время. В листинге 14.6 показано несколько примеров работы деструктуризации в 
ІаѵаБсгірі 1.7. 

Листинг 14.6. Примеры деструктуризации в 1.7 

<зсг ірб буре="арр1ісабіоп/ д аѵазсгірб;ѵегзіоп=1 .7"> 

// Пример использования деструктуризации для обмена значений 
// двух переменных 
[ Ь, а ] = [ а, Ь ] 

// Простая функция, возвращающая массив строк 
бипсбіоп безбО { 

гебигп [ "Джон", "октябрь" ]; 

} 

// Мы можем деструктурировать возвращенные данные в две новые 
// переменные - паше и шопбП 
ѵаг [ паше, шопбП ] = СезбО; 

// Пример деструктуризации с использованием объекта 
ѵаг { паше: шуЛаше } = { паше: "Джон" }; 

// Теперь шуЛаше == "Джон" 

// Простая структура данных 
ѵаг изегз = [ 

{ паше: "Джон", шопбП: "октябрь" }, 
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{ паше: "Боб", топЫт: "декабрь" }, 

{ паше: "Джейн", топЫт: "май" } 

] ; 

// Деструктуризация внутри цикла 

Дог ( ІеЬ { паше: паше, топЫт: шопбЬ } іп изегз ) { 

// Вывод всех уведомлений для Джона, Боба и Джейн 
аіегб ( паше + " месяц рождения " + топЬЪ. ); 

} 

</ зсгірО 

В целом язык ІаѵаБсгірі развивается в нескольких весьма позитивных направлениях, как правило 
впитывая в себя полезные качества других языков (среди которых РуДИоп и Ы5р). Но большинство появляющихся 
в нем полезных усовершенствований зависят от тех усилий по их реализации, которые различные поставщики 
браузеров вкладывают в язык. Наряду с тем, что МоііІІа РоипЬаНоп проявляет настойчивость в реализации новых 
возможностей, в других браузерах они развиваются довольно слабо. Хотя до начала использования ІаѵаБсгірІ 1.6 
или 1.7 в кроссбраузернах веб-приложениях должно еще пройти некоторое время, у вас есть возможность 
приступить к их использованию уже сейчас, разрабатывая расширения для браузеров на движке МогіІІа (по 
крайней мере до тех пор, пока не появится более распространенная реализация языка). 

ѴѴеЬ Арріісаііопз 1.0 

Вторая спецификация, продвигающая вперед ІаѵаБсгірІ-разработку — это ѴѴеЬ Арріісаііопз 1.0, которая 
принадлежит рабочей группе ѴѴНАТ-ѴѴС (ѴѴеЬ НурегІехІ АррІісаІіоп ТесЬпоІоду ѴѴогкіпд Сгоир). Эта спецификация 
распространяется на несколько различных направлений, добавляя ряд нововведений к НТМІ_, БОМ и ІаѵаБсгірІ: в 
целом. Многие считают, что работа над этой спецификацией должна превратиться в НТМІ_ 5. К счастью, в отличие 
от новых версий ІаѵаБсгірі, реализации этой спецификации (или их части) заполучить намного проще. 

Хотя вся спецификация достаточно обширна, я все же настоятельно рекомендую вам ее прочитать и 
посмотреть на новые технологии, которые уже на подходе. В этом разделе я обращу ваше внимание только на 
одну конкретную особенность этой новой спецификации: на элемент <сапѵа5>. Этот новый элемент дает 
возможность программным путем создавать двумерные изображения, используя ІаѵаБсгірІ:. Внедрение этой 
технологии идет очень интенсивно, облегчая ее изучение и тестирование. Дополнительная информация по ѴѴеЬ 
АррІісаііопз 1.0 и элементу <сапѵа5> может быть найдена в следующих источниках: 

• Полная спецификация ѴѴеЬ АррІісаІіопз 1.0: МірѴ/ѵѵЬаІѵѵд.огд/зресз/ѵѵеЬ-аррз/ сиггепі-ѵѵогк/ 

• Подраздел спецификации, относящийся конкретно к элементу <сапѵаз>: Ы1:р://ѵѵЬа1:ѵѵд.огд/5рес5/\л/еЬ- 

арр5/сиггепі-ѵѵогк/#(:Ье-2с1 

• Ряд примеров использования нового элемента <сапѵаз>: ЫТр://сІеѵеІорег.то 2 іІІа. 

огд/еп/с1ос5/Сапѵа5_1:и1огіаІ : Ва5Іс_апіта(:іоп5 

Элемент <сапѵаз> удовлетворяет запросы многих разработчиков веб-приложений, позволяя им вращать 
изображения, рисовать линии и создавать графические формы. Только одно это нововведение может добавить 
веб-приложению совершенно новый уровень интерактивности. 

Полезный эффект от возможности рисовать произвольные формы подстегнула команды, поддерживающие 
браузеры, к быстрому включению Сапѵаз АРІ в последние выпуски их продуктов. На данный момент уже все 
современные браузеры, за исключением ІпІегпеі Ехріогег, поддерживают Сапѵаз АРІ, но Соодіе нашел подход и к 
этому браузеру, и реализовал полноценный Сапѵаз АРІ в ІЕ, используя исконно присущую ему поддержку ѴМІ_. 
Более подробная информация о ЕхрІогегСапѵаз, разработанной Соодіе реализации Сапѵа5 в ІпІегпеІ Ехріогег 
находится по адресу: ЬІІрѴ/сосІе.доодІе.сот/р/ехрІогегсапѵаз/. 
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А теперь я собираюсь провести углубленное рассмотрение двух примеров, предоставленных в основном 
руководстве МоііІІа по <сапѵа5>. 

Создание часов 

Первый пример заключается в создании простых часов. Мы собираемся использовать Сапѵаз 2Э АРІ для 
рисования всех элементов часов; в этот процессе не будут использоваться какие-нибудь изображения или 
посторонние НТМІ_-элементы. На рис. 14.1 показан пример часов, которые мы собираемся нарисовать. 



Рис. 14.1. Анимированные часы, нарисованные с помощью Сапѵа5 АРІ 

Элемент <сапѵа5> работает подобно настоящему холсту художника. Вы можете нарисовать единственный 
статический кадр анимированных часов, но чтобы нарисовать новый кадр, нужно полностью очистить свой холст и 
нарисовать все заново. Если у вас есть опыт работы с ОрепСІ. АРІ, то вы почувствуете себя как дома и в среде 
Сапѵав АРІ. 

При работе с Сапѵав АРІ, вам понадобится часто вращать изображение, но это может привести к большой 
путанице, поскольку вы можете не знать, на какой угол вы в настоящий момент указываете, или где в данный 
момент находится ваша «кисть». По этой причине работа Сапѵав АРІ во многом похожа на стек: сначала вы 
сохраняете старую позицию и вращаете холст, вносите какие-то изменения во внешний облик текущего 
изображения, а затем возвращаетесь назад к первоначальному изображению и продолжаете рисовать. 

В листинге 14.7 приводится код, необходимый для создания анимированных часов с использованием 
Сапѵаз; обратите внимание, что для облегчения рисования в этом коде широко используется стек-система Сапѵа5. 

Листинг 14.7. Рисование анимированных часов с использованием Сапѵаз АРІ 


<Ьбт1> 

<ЬеасІ> 

<бі1:1е>Демонстрация часов Сапѵаз </біб1е> 

<ЗСГІрб> 

// Ожидание загрузки в браузер 
иіпсіои. опіоасі = бипсбіоп () { 

// Рисование часов 
сіоск(); 

// и перерисовка часов по прошествии каждой секунды 
зебіпбегѵаі(сіоск, 1000); 

} ; 


Дипсбіоп с1оск() { 

// Получение текущей даты и времени 

ѵаг пои = пей Бабе (); 

ѵаг зес = пои. дебЗесопбз (); 
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ѵаг гпіп = пом . деДМіпиДез () ; 
ѵаг Нг = пом . деДНоигз () ; 

Нг = Ьг >= 12 ? Нг - 12 : Нг; 

// Получение контекста элемента <сапѵаз> 

ѵаг сДх = сІоситепД . деДЕІетепДВуІсІ ( ' сапѵаз ' ) . деДСопДехД ( ' 2сІ' ) ; 

сДх.заѵе(); 

// Инициализация холста для рисования 
сДх. ЫеагВесД (0,0, 150, 150) ; 

// Когда мы рисуем в 0,0, мы фактически рисуем в 75,75 
сДх. ДгапзІаДе (75,75) ; 

// При рисовании линии ЮОрх, фактически рисуется линия в 40рх 
сПх. зсаіе (0.4,0.4) ; 

// Начало вращения курсора с 12:00 
сНх.гоНаНе(-МаПП. РІ /2); 

// Инициализация свойств рисунка 
сНх. зНгокеЗНуІе = "Ыаск"; 
сНх. ііІІЗПуІе = "Ыаск"; 
скх. 1іпеИісП;Ь. = 8; 
скх.ІіпеСар = "гоипсі"; 

// Часовые метки 
скх. заѵе (); 

скх. ЬедіпРакП (); 

// Для каждого часа 

Дог ( ѵаг і = 0; і < 12; і++ ) { 

// Вращение холста на 1/12 пути 
// (помните: длина окружности =2 * РІ) 
скх.гоДаке (МаДН .РІ/6); 

// Перемещение курсора почти к краю холста 
сДх.шоѵеТо(100,0); 

// и рисование короткой черточки (20рх) 
сДх.ІіпеТо (120,0) ; 

} 

сДх.зДгоке(); 
сДх. гезДоге (); 

// Минутные метки 
сДх.заѵе(); 


// Эти черточки будут меньше часовых 
сДх. ІіпеИісіДЬ. = 5; 
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сДх. ЪедіпРаДІі () ; 

// Для каждой минуты 

Дог ( ѵаг і = 0; і < 60; і++ ) { 

// кроме тех, что совпадают с часами 
іД ( і % 5 != 0 ) { 

// Перемещение курсора чуть дальше 
сДх. шоѵеТо (117,0) ; 

//И рисование короткой линии (Зрх) 
сДх.1іпеТо(120,0) ; 

} 

// Вращение холста 1/60 пути по кругу 
сДх.гоДаДе(МаДЬ.. РІ /30); 

} 

сДх.зДгоке(); 
сДх.гезДоге(); 

// Рисование часовой стрелки 
сДх. заѵе (); 

// Вращение холста на текущую позицию 
сДх.гоДаДе( (МаДП.РІ/6) * Пг + (МаДП. РІ /360) * шіп 

+ (МаДП. РІ /21600) * зес ) 

// Эта линия должна быть шире 
сДх . ІіпеМісіДЬ. = 14; 

сДх. ЬедіпРаДП (); 

// Начало рисования с выходом за пределы центра (чтобы 
// было похоже на часовую стрелку) 
сДх. шоѵеТо (-20,0); 

// и рисование почти до часовых черточек 
сДх. ІіпеТо (80,0); 
сДх.зДгоке(); 
сДх.гезДоге(); 

// Рисование минутной стрелки 
сДх. заѵе (); 

// Вращение холста на текущую минутную позицию 
сДх.гоДаДе( (МаДП. РІ /30) * шіп + (МаДП. РІ /1800) * зес ) 

// Эта линия будет тоньше, чем часовая стрелка 
сДх . ІіпеМісіДЬ. = 10; 


сДх. ЬедіпРаДП () ; 

// Но она также и длиннее, поэтому ее нужно установить чуть 
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// назад 

скх.тоѵеТо (-28,0); 

// и нарисовать чуть длиннее 
скх. ІіпеТо (112,0) ; 
скх.зкгоке(); 
скх.гезкоге(); 

// Рисование секундной стрелки 
скх. заѵе (); 

// Вращение холста на текущую секундную позицию 
скх.гокаке(зес * МакЬ.РІ/30); 

// Эта линия должна быть красноватой 
скх. зкгокеЗкуІе = "#040000"; 
скх. ІіІІЗкуІе = "#Б40000"; 

// и более тонкой, чем другие стрелки 
сбх. 1іпе1лГісІ±]і = 6; 

сбх. ЬедіпРакЬ (); 

// А также больше выступать назад 
сбх.шоѵеТо (-30,0); 

// но быть короче 
сбх. ІіпеТо (83,0); 
сбх.збгоке(); 
скх.гезкоге(); 

// Внешняя синяя окружность 
скх. заѵе (); 

// Обрамление будет широким 
скх. ІіпеИісІкЬ = 14; 

// и синеватым 

скх. зкгокеЗкуІе = '#325ЕА2'; 

скх. ЬедіпРакЬ () ; 

// Рисование полной окружности, отступающей от центра 
// на 142рх 

скх.агс(0,0,142,0,Макк. РІ*2 ,кгие); 
скх.зкгоке(); 
скх.гезкоге(); 

скх.гезкоге(); 


} 

</ зсгірк> 
</кеаб> 
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<ЪосІу> 

<сапѵаз ісі="сапѵаз" ЬеідЫ:="150" місІ±]і="150"></сапѵаз> 

</ЪосІу> 

</Ы:ш1> 

Как только вы проработаете все подробности и математические особенности (которые различаются в 
зависимости от сложности объекта, который вы пытаетесь нарисовать), Сапѵа5 20 АРІ станет очень полезным 
инструментом. 

Простая модель планет 

В нашем втором примере мы собираемся рассмотреть вращение изображений в противоположность 
обычному рисованию форм. Начнем с трех базовых изображений: одного для Солнца, второго для Земли и 
третьего для Луны. Затем создадим простую модель (которая выглядит хорошо, но точностью не отличается), 
показывающую вращение Земли вокруг Солнца, и вращение Луны вокруг Земли. Кроме этого будет примерно 
показано, какая сторона Земли будет темной во время ее вращения вокруг Солнца. На рис. 14.2 показан пример, 
как будет выглядеть конечный результат действующей модели. 



Рис. 14.2. Вращение Земли вокруг Солнца, и Луны вокруг Земли в простой планетной модели, 
выполненной с помощью Сапѵав 

В коде этого примера, конечно, найдется много похожего на код предыдущего примера (а именно, 
сохранение и восстановление позиций холста), но важно отметить, как именно происходит обработка рисунка и 
вращение отдельных изображений. В листинге 14.8 показан полный код для планетной модели, выполненной с 
помощью Сапѵа5. 

Листинг 14.8. Модель вращения Земли вокруг Солнца, созданная с помощью Сапѵаз 20 АРІ 


<Ы:ш1> 

<Ьеа<3> 

<Сі'Ые>Демонстрация части солнечной системы с помощью Сапѵаз</Сі'Ые> 
<зсгірб> 

// Инициализация списка используемых изображений 
ѵаг ітдз = { зип: пиіі, шооп: пиіі, еагСЬ: пиіі }; 


// Ожидание полной загрузки окна 
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міпсіом. опіоасі = бипсбіоп() { 

// Загрузка всех изображений из документа 
бог ( ѵаг і іп ішдз ) 

ішдз[і] = босшпепб . дебЕІетепбВуІсІ (і) ; 

// Запуск рисования 10 раз в секунду 
зебіпбегѵаі ( бга ѵг, 100 ) ; 

} ; 

бипсбіоп бгаи() { 

// Получение необходимых интервалов времени 
ѵаг біте = певд Бабе (); 

ѵаг з — ( (2 * МабП.РІ) / 6) * біте .дебЗесопбз(); 

ѵаг ш = ( (2 * МабП.РІ) / 6000 ) * біше . дебМіІІізесопбз (); 

// Получение контекста элемента <сапѵаз> 

ѵаг сбх = боситепб .дебЕІешепбВуІсі ('сапѵаз') .дебСопбехб('26'); 

// Очистка холста 

сбх.сІеагВесб(0,0,300,300) ; 

// Новые элементы всегда рисуются под старыми (используется для тени) 
// Дополнительная информация: 

// Пббр ://беѵеіорег.люгіііа.огд/еп/босз/Сапѵаз бибог іаі:Сошрозібіпд 
сбх.дІоЬаІСошрозібеОрегабіоп = 'безбіпабіоп-оѵег'; 

сбх.заѵе(); 

// Рисование в 0,0 = рисованию в 150,150 
сбх. бгапзіабе (150,150); 

// Вращение холста к позиции Земли 
сбх.гобабе( (з + ш) / 10 ); 

// Перемещение на 105 пикселов 
сбх. бгапзіабе (105,0); 

// Заполнение для тени (которая будет наплывать, 

// и мы сможем видеть сквозь нее) 

сбх. біІІЗбуІе = 'гдЬа(0,0,0,0.4) ' ; 

сбх. збгокеЗбуІе = 'гдЬа(0,153,255,0.4)'; 

// Рисование прямоугольника тени (не совсем 
// безупречного, но близкого к нужному) 
сбх.бі11Весб(0,-12,50,24) ; 

// Рисование Земли 

сбх. бгамітаде ( ішдз .еагбб, -12, -12) ; 


сбх. заѵе (); 
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// Вращение холста, относительно вращения Земли 
сбх. гобабе ( з + ш ); 

// Вращение Луны 'по орбите' 
сбх. бгапзіабе (0,28.5); 

// Рисование изображения Луны 
сбх. бгаиітаде(ішдз .шооп, -3 . 5,-3 . 5) ; 
сбх.гезбоге (); 

сбх.гезбоге (); 

// Рисование орбиты Земли 
сбх. ЪедіпРабЬ. (); 

сбх.агс(150, 150, 105,0,МабЬ. .РІ*2,ба1зе) ; 
сбх.збгоке(); 

// Рисование неподвижного Солнца 
сбх. бгамітаде ( ішдз .зип,0,0); 

} 

</ зсгірб> 

</ЬеасІ> 

<Ьобу збу1е="Ьаскдгоипсі : #000; "> 

ксапѵаз ісі="сапѵаз" ЬеідЬб="300" иібббі="300"></сапѵаз> 

<!-- Предварительная загрузка исходных изображений --> 

<сііѵ збу1е="сіізр1ау:попе; "> 

<ішд згс="зип .рпд" ісІ="зип"/> 

<ішд згс="шооп .рпд" ісі="шооп"/> 

<ішд згс="еагбЬ .рпд" ісі="еагббі"/> 

</сііѵ> 

</Ьобу> 

</Ьбш1> 

Элемент <сапѵаз> и соответствующий АРІ в последнее время нашли широкое применение; они 
используются как в инструментальной панели Арріе, так и в области графических элементов управления Орега. 
Это одна из частей «будущего» ІаѵаБсгірі которая доступна во всем своем практическом воплощении уже сейчас, 
и вы должны всерьез рассматривать ее использование в ваших приложениях. 

Сотеі 

Последняя новая концепция, которую мы собираемся рассмотреть, недавно подверглась 
усовершенствованию и находится в процессе превращения в новый стандарт. Хотя концепция А]ах является 
достаточно простой и понятной (наличие единственного асинхронного подключения), она не рассчитана на 
формирование пакета с каким-нибудь потоковым содержимым. Концепцию, способную обеспечить поток 
обновлений, приходящих в ваше веб-приложение, сейчас часто называют Соте! (название выдумал Алекс Рассел 
(АІех КизБеІІ) из Эо^іо). Возможность потокового обновления внутри веб-приложения предоставляет вам 
совершенно новую степень свободы, позволяя создавать сверхотзывчивые приложения (например, чаты). 

Аналогично А)ах, Сотеі, по существу, тоже не содержит новой технологии. Но многие разработчики 
взялись за усовершенствование общих потоковых концепций, ориентированных на веб-приложения в конечный 
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стандарт, называемый СотеЙ. Дополнительная информация о планируемом стандарте СотеЙ и сама концепция 
Сотеі могут быть найдены в следующих источниках: 

• Первоначальная статья Алекса Рассела (АІех РйзБеІІ), уточняющая концепцию, лежащую в основе Сотеі:: 

Іі11р://аІех.с1о]ойоІкі1.огд/?р=545 

• Определение спецификации Сотеі:: И11р://сотеЙ.сот/ 

Сотеі: улучшает текущие Аіах-приложения за счет наличия долговременных подключений, которые 
обеспечивают непрерывный поток новой информации с центрального сервера. Центральному серверу отводится 
роль равномерного распределения подключений на соответствующие каналы. На рис. 14.3 показан пример, как 
работает Сотеі по сравнению с традиционным А]'ах-приложением. 

Организация Ооіо Роипсіаііоп несет ответственность за основной объем работы, ведущей к 
стандартеризации Сотеі и превращению этой концепции в готовый продукт, которым мог бы воспользоваться 
обычный веб-разработчик. В листинге 14.9 показан пример использования библиотеки Оо;]о для запуска Сотеі- 
подключения к ресурсам на стороне сервера (который работает с использованием сервера СотеЙ). 

Листинг 14.9. Использование Оо]о и ее библиотеки СотеЙ для подключения к потоковому серверу и 
прослеживания различных каналов передачи 


<! БОСТУРЕ НТМЬ РЫВЫС "-//И ЗС//БТБ НТМЬ 4.01//ЕЫ" 

"НЬЬр : / /ѵгѵгѵг . ѵгЗ . огд/ТВ/Ы:т14 / зЬгісЬ . сН;с1"> 

<Ы:т1> 

<Ьеа<3> 

<Ьі1;1е>Тестовая страница клиент-серверной системы СотеЬсК/і:іЫе> 
<зсгірі: Ьуре="Ьех1;/ д аѵазсгірЬ"> 

// Мы собираемся регистрировать все взаимодействие на 

// панели отладки 

сфСопіід = { ізБеЬид: Ьгие }; 

</ зсгірО 

<зсгірі: Ьуре="Ьех1;/д аѵазсгірб" згс=". ./бод о/бод о . д з"Х/зсгірб> 

<зсгірі: Ьуре="Ьех1;/д аѵазсгірЬ"> 
сіо □ о . гедиіге ("бод о . іо . сотеЬб") ; 
бод о . аббОпЬоаб (ЬипсЬіоп () { 

// Установка базового ЫКЬ для всего взаимодействия с сотеЬб 
сотеЬб.іпіЬ({}, "/сотеЬб"); 

// Подписка на отдельный пункт передачи 

// Будет отслеживаться весь выходящий поток, поступающий именно 
// из этой службы и регистрироваться на панели отладки 
сотеЬб. зиЬзсгіЬе ("/іоо/Ьаг/Ьаг", Ьаізе, бодо, "беЪидЗЬаІІом"); 

// Распространение двух сообщений двум различным службам 
сотеЬб. риЫізЬ. ("/іоо/Ьаг/Ьаг", { Ыіиб: "Ыюпк!"}); 
сотекб. риЫізЬ. ( " / іоо/Ьаг/Ьаг/хуггу" , 

{ Ьоо: "А зішріе шеззаде" }); 


}) ; 

</зсгірО 
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</ЬеасІ> 

<ЪосІу></ЪосІу> 

</Ы:ш1> 

Хотя количество приложений, использующих СотеЬ (или подобную Соте! технологию) пока еще не очень 
велико, это количество обязательно увеличится по мере того, как все большее количество людей начнет 
понимать, насколько полезна именно эта часть технологии для создания высокопроизводительных веб¬ 
приложений. 
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Аіах ѵѵеЬ арріісаііоп тосіеі (азупсРгопоиз) 



зегѵег-зісіе зегѵег-зійе зегѵег-зійе зегѵег-зійе 

ргосеззіпд ргосеззіпд ргосеззіпд ргосеззіпд 


Соте! ѵѵеЬ арріісаііоп тосіеі 



Рис. 14.3. Сравнение традиционной модели А]ах и новой модели веб-приложения, использующего 
методику Со те! 


Вывод 
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Технология, представленная в этой главе, относится к широкому диапазону, в нее входит все, начиная со 
сложной и отдаленной перспективы (как деструктуризация в ІаѵаЗсгірІ 1.7), и до текущих и широко используемых 
вещей (например, элемента <сапѵаэ>). Надеюсь, мне удалось дать вам хорошее представление о том 
направлении, в котором в ближайшем будущем будет двигаться веб-разработка, основанная на использовании 
браузеров. 
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Приложение А Справочник по РОМ 

Это приложение служит справочником по функциональным возможностям, предоставляемым объектной 
моделью документа, рассмотренной в главе 5. 

Кезоигсез 

Функциональные возможности ЭОМ сформировались из множества разновидностей, начиная с исходной 
предварительной спецификации ЭОМ 1_еѵеІ 0, и развиваясь до вполне определенных ЭОМ І_еѵеІ5 1 и 2. Поскольку 
все современные браузеры практически полностью поддерживают разработанные ѴѴЗС спецификации ЭОМ І_еѵеІз 
1 и 2, веб-сайт ѴѴЗС случит превосходным справочным пособием для изучения порядка работы йОМ: 

• ООМ іеѵеі 1: Ы;1;р://ѵѵѵѵѵѵ.\л/3.огд/Тк/РІЕС-ООМ-ІеѵеІ-1/ІеѵеІ-опе-соге.Іі(:тІ 

• НТМІ I ООМ іеѵе! 1\ ЬіфѴ/ѵѵѵѵѵѵ.ѵѵЗ.огд/ТРІ/РІЕС-ООМ-І-еѵеІ-І/ІеѵеІ-опе-І'ФтІ.І'ФтІ 

• ООМ іеѵеі 2: /?№р://ѵѵ\л/ѵѵ.ѵѵЗ.огд/ТК/ООМ-І-еѵеІ-2-Соге/ 

• НТМІ ООМ іеѵеі 2: Мі;1;р://ѵѵѵѵѵѵ.ѵѵ3.огд/ТК/ООМ-ЕеѵеІ-2-НТМ17 

Кроме этого существует ряд отличных справочных руководств для изучения функционирования ООМ, но 
лучшими все же являются источники, находящиеся на (Зиігквтосіе.огд, веб-сайте, запущенном Питером-Паулем 
Кохом (Реіег-РаиІ КосИ). Он провел всесторонние исследования каждого доступного ООМ-метода и сравнил свои 
результаты на всех современных браузерах (и не только на них). Это бесценный источник для определения того, 
что возможно, а что невозможно на тех браузерах, для которых вы ведете разработку: 

• ѴѴЗС ООМ Соге іеѵеіз 1 апсі 2 геіегепсе : МНр://ѵѵѵѵѵѵ.диігк5тосіе.огд/с1от/ѵѵЗс_соге.Іі(:тІ 

• ѴѴЗС ООМ НТМІ іеѵеіз 1 апсі 2 геіегепсе : И(:1:р://ѵѵѵѵ\л/.диігк5тосіе.огд/сІот/ѵѵЗс_Іп(:тІ.ІтІ:тІ 

Терминология 

В главе 5, посвященной объектной модели документа, и в этом приложении, я использую общепринятую 
ХМІ- и ООМ терминологию для описания различных аспектов ООМ-представления ХМІ_- доку мента. Следующие 
слова и фразы представляют терминологию, которая относиться к объектной модели документа и, в общем, к 
документу ХМІ_. Все терминологические примеры будут относиться к образцовому НТМІ_-документу, показанному в 
листинге А.1. 

Листинг А.1. Пример, на который мы будем ссылаться при рассмотрении ЭОМ и ХМІ. терминологии 


<! БОСТУРЕ НТМЬ РЫВЫС "-//И ЗС//БТБ НТМЬ 4.01//ЕЫ" 

"ЬССр : / /ѵгѵгѵг . ѵгЗ . огд/ТК./ЬСт14 / зСгісС . <ЗСсІ"> 

<ЬСт1> 

<Ьеа<3> 

<СіС1е>ІпСгосІисСіоп Со СЬе БОМ</СіС1е> 

</Ьеа<3> 

<ЪосІу> 

<Ь1>ІпСгосІисСіоп Со СЬе БОМ</Ы> 

<р с1азз="СезС">ТЬеге аге а питЬег оЕ геазопз мЬу СЬе БОМ із амезоте, 
Сеге аге зоше:</р> 

<и!> 


<1і ісі="еѵегумСіеге">ІС сап Ье Еоипсі еѵегумЬеге. </1і> 
<1і с!азз="СезС">ІС'з еазу Со изе.</1і> 
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<1І с1азз="1:ез'Ь">11: сап Ьеір уои Со Тіпсі ѵЛіаб уои мапС, геаііу 

риіскіу . </1і> 

</и1> 

</ЬосІу> 

</Ы:ш1> 

Предок 

Термин, очень похожий на генеалогический, ссылается на родителя текущего элемента, а также на 
родителя этого родителя, и на родителя этого родителя и т.д. В листинге А.1 родительскими для элемента <иІ> 
являются элемент <Ьосіу> и элемент <М:тІ>. 

Атрибут 

Атрибуты являются свойствами элементов, в которых содержится принадлежащая им дополнительная 
информация. В листинге А.1 у элемента <р> есть атрибут сіазэ, в котором содержится значение Іезі:. 

Дочерний элемент 

Любой элемент может содержать любое количество узлов (каждый из которых рассматривается в качестве 
дочернего по отношению к родительскому элементу). В листинге А.1 элемент <иІ> содержит семь дочерних узлов; 
три дочерних узла являются элементами <1і>, а остальные четыре — конечными строками, находящимися внутри 
каждого элемента (содержащихся в пределах текстовых узлов). 

Элемент Ооситепі 

Каждый ХМІ_-документ состоит из одного элемента (так называемого корневого узла или элемента 
боситепі), который содержит все остальные аспекты документа. В листинге А.1 элементом сіосшпепі: является 
<ЫтІ>, в котором содержится весь остальной документ. 

Потомки 

Потомки элементов содержат его дочерние узлы, детей его детей, детей их детей и т.д. В листинге А.1 
потомки элемента <Ьобу> включают <И1>, <р>, <иІ> и <ІІ>-элементы, а также все текстовые узлы, которые 
содержатся во всех этих элементах. 

Элемент 

Элемент является контейнером, в котором содержатся атрибуты и другие узлы. Первичными и наиболее 
примечательными компонентами любого НТМІ_-документа являются его элементы. В листинге А.1 присутствует 
множество элементов; все теги — <ЫтІ>, <Неас1>, <1Ше>, <Ьобу>, <61>, <р>, <иІ> и <ІІ> — являются 
элементами. 

Узел 


Узел является основной составной частью ООМ-представления. Элементы, атрибуты, комментарии, 
документы и текстовые узлы — все являются узлами, и поэтому обладают стандартными свойствами узлов (к 
примеру, побеТуре, побеЫате и посІеѴаІие имеются в каждом узле). 

Родитель 

Термин «родитель» используется для ссылки на элемент, в котором содержится текущий узел. Родитель 
есть у всех узлов, кроме корневого. В листинге А.1 родителем для элемента <р> является элемент <Ьобу>. 
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Сестры 

Сестринский узел является дочерним узлом того же самого родительского узла. Обычно этот термин 
используется в контексте ргеѵіоизБіЫіпд и пехіБіЫіпд, двух свойств, имеющихся у всех ООМ-узлов. В листинге А.1 
сестринскими для элемента <р> являются элементы <Н1> и <иІ> (вместе с несколькими пустыми текстовыми 
узлами). 

Текстовые узлы 

Текстовым называется особенный узел, который содержит только текст; сюда включается видимый текст и 
все виды пустых пространств. Если вы видите текст внутри элемента (например, <Ь>ОеМо ѵѵогісі! </Ь>), значит, 
внутри элемента <Ь> фактически находится отдельный текстовый узел, содержащий текст «ИеІІо ѵѵогісі!». Текст 
«П'з еазу То изе» в листинге А.1, который находится внутри второго элемента <ІІ>, содержится внутри текстового 
узла. 

Глобальные переменные 

Глобальные переменные существуют в пределах глобальной области видимости вашего кода, и 
существуют для того чтобы помочь вам работать с общими ООМ-операциями. 

сіоситепі 

Эта переменная содержит активный НТМІ. ЭОМ-документ, который просматривается в браузере. Но сам 
факт существования этой переменной и наличия в ней какого-нибудь значения еще не означает, что ее 
содержимое было полностью загружено и прошло синтаксический анализ. Более подробные сведения об 
ожидании загрузки ЭОМ приведены в главе 5. В листинге А.2 показан ряд примеров использования переменной 
сіоситепі, которая содержит представление НТМІ_ БОМ для обращения к элементам документа. 

Листинг А.2. Использование переменной сіоситепі для доступа к элементам документа 


// Обнаружение элемента, ІБ которого имеет значение 'Ъобу' 
босшпепб . дебЕІетепбВуІсІ ( "Ъосіу" ) 

// Обнаружение всех элементов, имеющих имена тегов <сііѵ>. 
босшпепб . дебЕІетепбзВуТадЛате ( "сііѵ" ) 

НТМІ_ЕІетеп* 

Эта переменная является надклассовым объектом для всех НТИБ ООМ-элементов. Продолжение прототипа 
этого элемента распространяется на все НТМБ ЭОМ-элементы. Этот суперкласс доступен по умолчанию во всех 
браузерах на движке МоііІІа и в браузере Орега. Используя методы, описанные в главе 5, его также можно 
добавить к Іпіегпеі Ехріогег и Баіагі. В листинге А.З показан пример привязки новых функций к глобальному 
суперклассу НТМІЕІетепІ. Присоединение функции ИазСІазз дает возможность увидеть, имеет ли элемент 
определенный класс. 

Листинг А.З. Привязка новых функций к глобальному суперклассу НТМІ-ЕІетепІ: 


// Добавление ко всем НТМБ БОМ-элементам нового метода, 
// который может быть использован, чтобы увидеть 
// имеется ли у элемента определенный класс или нет. 
НТМБЕІетепб .ргобобуре. ЬазСІазз = Дипсбіоп ( сіазз ) { 
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геЬигп пем КедЕхр (" ( л |\\з) " + сіазз + " (\\з | $) ") . ЬезЬ ( Ьіііз . сІаззЛате ); 

} ; 


Перемещение по йОМ 

Следующие свойства являются составной частью всех ЭОМ-элементов и могут быть использованы для 
перемещения по ЭОМ-документам. 

Ьосіу 


Это свойство глобального НТМІ. ЭОМ-документа (переменной сіоситепі:) непосредственно указывает на 
НТМІ_-элемент <Ьосіу> (который должен быть только один). Это свойство относится к тем, которые были 
перенесены еще из времен ЭОМ 0 ЭаѵаЗсгірі;. В листинге А.4 показано несколько примеров обращения к элементу 
< Ьосіу > из НТМІ_ ЭОМ-документа. 

Листинг А.4. Обращение к элементу < Ьосіу > внутри НТМІ_ ООМ-документа 


/ / Изменение полей <Ъос1у> 

ЬоситепЬ .Ьосіу . збуіе .шагдіп = "Орх"; 

// ЬоситепЬ .Ьосіу эквивалентно следующему выражению: 

ЬоситепЬ . деЬЕІетепЬзВуТадЛате ("Ьосіу") [ 0 ] 

сМІсПЧосІез 

Это свойство имеется у всех ЭОМ-элементов и содержит массив всех дочерних узлов (включая элементы, 
текстовые узлы, комментарии и т.д.). Оно предназначено только для чтения. В листинге А.5 показано, как нужно 
использовать свойство сЫІсіІ\Іосіе5 для добавления стилевой установки ко все дочерним элементам данного 
родителя. 

Листинг А.5. Добавление красного обрамления вокруг дочерних элементов, принадлежащих элементу 
< Ьосіу > с использованием свойства сНПсИМойев 


// Добавление обрамления ко всем, имеющимся у <ЬоЬу> дочерним элементам 
ѵаг с = ЬоситепЬ . Ьосіу . сіііІсіЛосІез ; 

Дог ( ѵаг і = 0; і < с.ІепдЫг; і++ ) { 

// Нужно убедиться, что этот узел является элементом 
іб ( с[і] .поЬеТуре == 1 ) 

с [і] . збуіе . ЬогЬег = "Ірх зоіісі геЬ"; 

} 

сІоситепіЕІетепі 

Это свойство, которое имеется у всех ЭОМ-узлов, действует в качестве ссылки на корневой элемент 
документа (в случае с НТМІ_-документами, он всегда будет указывать на элемент <бі:тІ>). В листинге А.6 показан 
пример использования сіоситепЬЕІетепІ; для поиска ООМ-элемента. 

Листинг А.6. Пример обнаружения корневого элемента из любого ЭОМ-узла 


// Обнаружение ЬосишепЬЕІешепЬ для поиска элемента по его ІБ 
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некийПроизвольныйУзел . сіоситепЬЕІетепІ: . деЬЕІетепЬВуІсІ ("Ьосіу") 

1ІГ5ІСИІІСІ 

Это свойство, имеющееся у всех ЭОМ-элементов, указывает на первый дочерний узел данного элемента. 
Если у элемента нет дочерних узлов, ЛгзІСЫІсі будет равен нулю. В листинге А.7 показан пример использования 
свойства ЯгзіСЬіІсІ для удаления всех дочерних узлов данного элемента. 

Листинг А.7. Удаление из элемента всех дочерних узлов 


// Удаление из элемента всех дочерних узлов 
ѵаг е = ЬосшпепЬ . деЬЕІетепЬВуІсі ( "Ьосіу" ) ; 
иЫІе ( е. ЬігзЬСЬіІсІ ) 

е . гетоѵеСЬіІсІ ( е. ЬігзЬСЬіІсІ ); 

деіЕІетепіВуІсІ( элемЮ ) 

Это весьма эффективная функция, которая обнаруживает в документе один из элементов, имеющий 
определенный Ю. Функция доступна только элементу ЬоситепЬ Кроме этого, функция может не работать, если 
будет применена к ЭОМ-документам, не имеющим отношения к НТМІ_; как правило, при работе ХМІ_ ЭОМ- 
документами нужно точно указать атрибут Ю в ЭТЭ (определении типа документа — Эоситепі Туре ЭеЛпШоп) 
или в схеме. 

Как показано в листинге А.8, эта функция принимает единственный аргумент: имя искомого Ю. 

Листинг А.8. Два примера обнаружения НТМЬ-элементов по именам их Ю-атрибутов 


// Обнаружение элемента по значению ІБ, равному Ьосіу 
ЬосшпепЬ . деЬЕІетепЬВуІсІ ( "Ьосіу") 

// Скрытие элемента, у которого значение ІВ равно поЬісе 
сіоситепЬ . деЬЕІетепЬВуІсІ ( "поЬісе") . збуіе . сіізріау = ' попе ' ; 

де1ЕІетеп1$ВуТадМате( имяТега ) 

Это свойство отыскивает все элементы-потомки, которые имеют определенное имя тега, начиная с 
текущего элемента. Эта функция одинаково хорошо работает как ХМІ_ ЭОМ, так и в НТМІ. ЭОМ-документах. 

Во всех современных браузерах можно задать в качестве имени тега знак звездочки (*) и найти все 
элементы-потомки, и это получится намного быстрее, чем при использовании рекурсивной функции, написанной 
на чистом іаѵаЗсгірІ:. 

Эта функция принимает единственный аргумент: имя тега искомых элементов. В листинге А.9 показан 
пример использования деіЕІетепІ:5ВуТад№те. Первый блок добавляет класс МідЫідЫ: всем <сііѵ>-элементам 
документа. Второй блок находит все элементы внутри элемента, у которого значение Ю равно Ьосіу, и прячет те 
из них, которые имеют класс ЬідЫідЫ:. 


Листинг А.9. Два блока кода, в которых демонстрируется использование деіЕІегпепІізВуТадМате 
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// Обнаружение всех элементов <сііѵ> в текущем НТМЬ-документе 
// и установка значения их атрибута сіазз в ' ЫдЫідЫ; ' 
ѵаг б = босшпепЬ. деЬЕІетепЬзВуТадЛате ( "біѵ" ); 

Ног ( ѵаг і = 0; і < б.ІепдЫт; і++ ) { 

б [і].сІаззЛате = ЧтіІіЬе'; 

} 

// Проход по всем элементам-потомкам элемента, у которого значение 
// ІБ равно Ьобу. Затем обнаружение всех элементов, у которых значение 
// аргумента сіазз равно ' ЫІіЬе'. После чего скрытие всех элементов, 

// соответствующих этому условию. 

ѵаг аіі = босшпепЬ. деЬЕІетепЬВуІб ("Ьобу"). деЬЕІетепбзВуТадЛате ("*"); 

Ног ( ѵаг і = 0; і < аіі. ІепдЫт; і++ ) { 

НН ( аіі [ і ] . сІаззЛате == ЧгіІіЬе' ) 
аіі [і] .збуіе.бізріау = 'попе'; 

} 

ІазіСМІсІ 

Эта ссылка, доступная во всех РОМ-элементах, указывает на последний дочерний узел этого элемента. 
Если дочерних узлов нет, значение ІавІСЫІб будет равно нулю (пиІІ). В листинге А.10 показан пример 
использования свойства ІазІСМИб для вставки элемента в документ. 

Листинг А.10. Создание нового <біѵ>-элемента и вставка его перед последним элементом в <ЬосІу> 


// Вставка нового элемента непосредственно перед последним элементом в 
// <Ьобу> 

ѵаг п = босшпепб. сгеабеЕІешепб ( "біѵ" ); 
п.іппегНТМЬ = "Спасибо за визит!"; 

босшпепб.Ьобу. іпзегбВебоге ( п, босишепб.Ьобу. ІазбСЬіІб ); 

пехІЗіЫіпд 

Эта ссылка, доступная во всех ЭОМ-узлах, указывает на последний сестринский узел. Если узел является 
последним сестринским, значение пехІЗіЫіпд будет равно нулю (пиІІ). Важно помнить о том, что свойство 
пехІЗіЫіпд может указывать на ЭОМ-элемент, комментарий или даже на текстовый узел; поэтому оно не служит 
исключительным способом перемещения по ЭОМ-элементам. В листинге А.11 показан пример использования 
свойства пехІЗіЫіпд для создания интерактивного списка определений. 

Листинг А.11. Принуждение всех элементов <61> по щелчку раскрывать свои сестринские элементы <бб> 


// Обнаружение всех элементов <6Ь> (БеЫпЫоп Тегш — определяемый термин) 
ѵаг бб = босшпепЬ. деЬЕІешепЬзВуТадЛаше ("бб"); 

Ног ( ѵаг і = 0; і < бЬ.ІепдЫт; і++ ) { 

// Отслеживание щелчка на термине 
бб[і].опсііск = ІипсЬіоп() { 
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// Поскольку каждый термин имеет прикрепленный к нему 
// элемент <сІсІ> (Вебіпікіоп — определение), 

// мы можем его отобразить по щелчку 

// ПРИМЕЧАНИЕ: Работает при условии, что между элементами <сІсІ> 

// отсутствуют пустые пространства 

СЫз . пехбЗіЫіпд . збуіе . сіізріау = 'Ыоск'; 

} ; 

} 

рагепШосІе 

Это свойство есть у всех ЭОМ-узлов. Свойство рагепШосіе каждого ООМ-узла указывает на элемент, 
которые его содержит, за исключением элемента боситепі, который указывает на пиІІ (поскольку ничто не 
содержит корневой элемент). В листинге А.12 показан пример использования свойства рагепШосіе для создания 
собственного сценария взаимодействия. Щелчок на кнопке СапсеІ (Отмена) приводит к скрытию родительского 
элемента. 

Листинг А. 12. Использование свойства рагепШойе для создания собственного сценария взаимодействия 


// Отслеживание щелчка на кнопке (например, СапсеІ) 

// и скрытие родительского элемента 

босшпепб. дебЕІетепбВуІсІ ( "сапсеІ" ). опсііск = іипсбіоп () { 
бЫз . рагепбііосіе . збуіе . сіізріау = ' попе ' ; 

} ; 


ргеѵіоизЗіЫіпд 

Эта ссылка, доступная во всех ООМ-узлах, указывает на предыдущий сестринский узел. Если узел 
является первым сестринским, значение ргеѵіоизБіЫіпд будет равно нулю (пиІІ). Важно помнить о том, что 
свойство ргеѵіоизЗіЫіпд может указывать на ЭОМ-элемент, комментарий или даже на текстовый узел; поэтому оно 
не служит исключительным способом перемещения по ЭОМ-элементам. В листинге А.13 показан пример 
использования свойства ргеѵіоизЗіЫіпд для скрытия элементов. 

Листинг А. 13. Скрытие всех элементов перед текущим элементом 


// Обнаружение всех элементов перед текущим, и их скрытие 

ѵаг сиг = СПіз . ргеѵіоизЗіЫіпд; 

мПіІе ( сиг != пиІІ ) { 

сиг. збуіе . сіізріау = ' попе ' ; 

сиг = СПіз . ргеѵіоизЗіЫіпд; 

} 

Информация об узле 

Эти свойства имеются у большинства ЭОМ-элементов с целью предоставления простого доступа к общей 
информации об элементе. 


іппегТех* 
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Это свойство есть у всех ЭОМ-элементов (которые существуют только в тех браузерах, которые не 
работают на движках МогіІІа, поскольку оно не является частью стандарта ѴѴЗС). Оно возвращает строку, 
содержащую весь текст, находящийся внутри текущего элемента. Поскольку это свойство не поддерживается 
браузерами на движках МоііІІа, вы можете воспользоваться обходным путем, подобным одному их описанных в 
главе 5 (где мы использовали функцию для сбора значений текстовых узлов-потомков). В листинге А. 14 показан 
пример использования свойства іппегТех! и функции 1ехІ() из главы 5. 

Листинг А.14. Использование свойства іппегТехІ для извлечения из элемента текстовой информации 


// Предположим, что у нас есть элемент <1і> похожий на этот, 
// сохраненный в переменной ' 1і ': 

// <1і>Пожалуйста, посетите <а Пгеб="Ы:1:р: //тузібе . сош/"> 

мой веб-сайт </а>.</1і> 


// Использование свойства іппегТехб 
1і . іппегТехб 

// или функции СехбО, рассмотренной в главе 5 
бехб ( 1І ) 

// Результат использования свойства или функции будет следующим: 

"Пожалуйста, посетите мой веб-сайт." 

посІеМате 

Это свойство доступно для всех ООМ-элементов, содержащих версию имени элемента в верхнем регистре. 
Например, если у вас имеется элемент <1і>, и вы обращаетесь к его свойству побеЫате, он вернет И. В листинге 
А.15 показан пример использования свойства побеЫате для модификации имен классов родительских элементов. 

Листинг А.15. Обнаружение всех родительских элементов <ІІ> и установка значение их класса в сиггепі 


// Обнаружение всех родителей данного узла, являющихся элементом <1і> 
ѵаг сиг = СПіз .рагепбЛобе; 
мЫІе ( сиг != пиіі ) { 

// Как только элемент найден и его имя проверено, добавить класс 
іТ ( сиг.побеЛаше == 'Ы' ) 

сиг. сІаззЛате += " сиггепб"; 
сиг = СНіз .рагепбЛобе; 

} 

посІеТуре 

Это общее свойство всех ЭОМ-узлов, содержащее номер, соответствующий типу данного узла. Существует 
три наиболее широко распространенных типа узлов, используемых в НТМІ_-документах: 

• Узел элемента (имеет значение 1 или боситеп1.ЕІ-ЕМЕІ\]Т_І\ІСЮЕ) 

• Текстовый узел (имеет значение 3 или боситеп1.ТЕХТ_І\ІСЮЕ) 

• Узел документа (имеет значение 9 или сІоситеп1:.ООСІІМЕГ\ІТ_І\ІСЮЕ) 
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Использование свойства посіеТуре является надежным способом убедиться в том, что узел, к которому вы 
пытаетесь получить доступ, обладает всеми ожидаемыми свойствами (к примеру, свойство побеЫате может 
использоваться только для ООМ-элементаі; поэтому перед обращением к нему можно воспользоваться посіеТуре, 
чтобы убедиться, что это свойство равно 1). В листинге А.16 показан пример использования свойства посіеТуре 
для добавления класса многим элементам. 

Листинг А.16. Обнаружение первого элемента в НТМІ_ <Ьобу> и использование для него класса беасіег 


// Обнаружение в <Ъос1у> первого элемента 
ѵаг сиг = сіоситепб . Ъосіу . ТігзбСЫІсІ; 
иЫІе ( сиг != пиіі ) { 

// Если элемент был найден, добавить к нему класс Ьеабег 
іТ ( сиг. посіеТуре == 1 ) { 

сиг. сІаззЛате += " Ьеабег"; 
сиг = пиіі; 

// В противном случае продолжить проход по дочерним узлам 
} еізе { 

сиг = сиг. пехбЗіЫіпд; 

} 

} 

посІеѴаІие 

Это полезное свойство текстовых узлов, оно может быть использовано для доступа и работы с текстом, 
который в них содержится. Хорошим примером его использования может послужить функция іехі, представленная 
в главе 5, которая используется для извлечения текстового содержимого элемента. В листинге А.17 показан 
пример использования свойства посІеѴаІие для создания простой функции извлечения текстового значения. 

Листинг А.17. Функция, принимающая элемент и возвращающая текстовое содержимое этого элемента и 
его элементов-потомков 


Типсбіоп бехб(е) { 
ѵаг Ц = 

// Если элемент передан, обнаружение его дочерних элементов, 

// если нет, предположение, что это массив 
е = е. сЬіІсШосІез | | е; 

// просмотр всех дочерних узлов 

Тог ( ѵаг ^ =0; ^ < е.ІепдбЬ; -Ч1 ) { 

// Если это не элемент, добавление его текстового значения, 

// в противном случае рекурсивное обращение ко всем его дочерним 
// элементам 

б += е [д ] .посіеТуре != 1 ? 

е [ ^ ] . посІеѴаІие : бехб (е [;і ] . сЪИсШосИез) ; 


} 
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// Возвращение соответствующего текста 
гебигп б; 

} 

Атрибуты 

Большинство атрибутов доступно в виде свойств своих элементов. Например, атрибут Ш может быть 
получен с использованием простого выражения еіетепі.ісі. Эта особенность осталась со времен ЭОМ 0, и скорее 
всего оно так и останется, благодаря его простоте и популярности. 

сІа88Мате 

Это свойство позволяет добавлять и удалять классы в БОМ-элементе. Оно существует во всех элементах 
ООМ. Причиной его отдельного упоминания стало название — сІаззЫате, в котором нарушен ожидаемый порядок 
слов. Это странное название связано с тем, что слово сІаз5 зарезервировано в большинстве объектно- 
ориентированных языков программирования; поэтому его использования избегают, чтобы не создавать трудности 
в программировании веб-браузера. В листинге А.18 показан пример использования свойства сІаБзЫате для 
скрытия некоторых элементов. 

Листинг А.18. Обнаружение всех <сііѵ>-элементов, имеющих класс зресіаі и их скрытие 


/ / Обнаружение всех имеющихся в документе элементов <сііѵ> 
ѵаг сііѵ = босшпепб . дебЕІетепбзВуТадЛате ( "сііѵ" ) ; 
бог ( ѵаг і = 0; і < сііѵ. Іепдбіі; і++ ) { 

// Обнаружение всех элементов <біѵ>, имеющих общий класс 'зресіаі' 
іб ( сііѵ[і] .сІаззЛате == "зресіаі" ) { 

//И их скрытие 

сііѵ [ і ] . збуіе . бізріау = 'попе'; 

} 

} 

деіАНгіЬиіеС имяАтрибута ) 

Эта функция служит хорошим способом доступа к значению атрибута, содержащегося внутри ЭОМ- 
элемента. Атрибуты инициализируются значением, которое пользователь предоставляет в обычном НТМІ_- 
документе. 

Функция принимает единственный аргумент: имя атрибута, значение которого нужно извлечь. В 
листинге А. 19 показан пример использования функции деіАНгіЬиіеО для поиска элементов іприі определенного 
типа. 


Листинг А.19. Обнаружение элемента < іп риб>, у которого атрибут пате имеет значение іехі и 
копирование его значения в элемент, у которого атрибут Ш имеет значение ргеѵіеѵѵ 


// Обнаружение всех элементов ввода данных формы — іприб 
ѵаг іприб = боситепб. дебЕІетепбзВуТадЛате ( "іприб" ); 
бог ( ѵаг і = 0; і < іприб. Іепдбіі; і++ ) { 


// Обнаружение элемента, у которого атрибут паше имеет значение "бехб 
іб ( іприб [ і ]. дебАббгіЬибе( "паше" ) == "бехб" ) { 
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// Копирование значения в другой элемент 
босшпепк . декЕІетепбВуІсІ ( "ргеѵіем" ) . іппегНТМЬ = 
іприк [і] . дебАб'ЬгіЪи'Ье ("ѵаіие") ; 

} 

} 

гетоѵеАИгіЬиІе( имяАтрибута ) 

Эту функцию можно использовать для полного удаления атрибута из элемента. Обычно результат 
использования этой функции можно сравнить с результатом применения функции зеІАНгіЬиІе со значением " " 
(пустой строки) или пиІІ; но на практике лучше все же всегда полностью удалять лишние атрибуты, чтобы 
избежать любых неожиданных последствий. 

Эта функция принимает единственный аргумент: имя атрибута, требующего удаления. В листинге А.20 
показан пример снятия в форме некоторых флажков. 

Листинг А.20. Обнаружение всех флажков, имеющихся в документе, и их снятие 


// Обнаружение всех элементов ввода данных формы 
ѵаг іприк = боситепк . дебЕІетепбзВуТадЫате ("іприб") ; 

Іог ( ѵаг і = 0; і < іприк.ІепдбЬ; і++ ) { 

// Обнаружение всех флажков 

И ( іприб[і].дебАббгіЬибе( "буре" ) == "сЬескЬох" ) { 

// Снятие флажков 

іприб [ і ]. гешоѵеАббгіЬибе( "сЬескеб" ); 

} 

} 

8еіАигіЬиіе( аНгМате, аНгѴаІие ) 

Эта функция служит хорошим способом установки значений атрибута, содержащегося внутри ООМ- 
элемента. Кроме этого она может добавить ваши собственные атрибуты, к которым позже можно будет обратиться, 
не оказывая влияния на появление ЭОМ-элементов. Функция зеЬАйгіЬиІе склонна вести себя в Іпіегпеі: Ехріогег 
несколько странным образом, не позволяя устанавливать определенные атрибуты (например, сіазз или 
гпахіепдііт). Все это подробнее объяснено в главе 5. 

Функция принимает два аргумента. Первый — имя атрибута, а второй — присваиваемое ему значение. В 
листинге А.21 показан пример установки значения атрибута ООМ-элемента. 

Листинг А.21. Использование функции зеІАНгіЬиІе для создания <а>-ссылки на Соодіе 


// Создание нового элемента <а> 
ѵаг а = босшпепб. сгеабеЕІешепб ("а"). 

// Установка ІЖЬ для посещения веб-сайта Соодіе 
а. зебАббгіЬике ( "Ьгеі" ,"Ьббр:// доодіе .сот/"); 
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// Добавление внутреннего текста, на котором пользователь может сделать 
// щелчок 

а. аррепбСЬИб ( боситепб . сгеабеТехбЫосІе ( "Посетите боодіе !" ) ); 

// Добавление ссылки в самый конец документа 
боситепб . Ъобу. аррепбСЬИб ( а ); 

Модификация йОМ 

Здесь представлены все свойства и функции, которые можно использовать для работы с ЭОМ. 

аррепсІСЫІсІ( добавляемыйУзел ) 

Эту функцию можно использовать для добавления дочернего узла к элементу-контейнеру. Если 
дополняемый узел уже существует в документе, он перемещается со своего текущего места и добавляется к 
текущему элементу. Функция аррепбСНіІсі должна быть вызвана для элемента, который требуется дополнить. 

Функция принимает единственный аргумент: ссылку на ЭОМ-узел (он может быть только что созданным, 
или ссылка может быть на узел, который уже существует в каком-нибудь месте документа). В листинге А.22 
показан пример создания нового элемента <иІ> и перемещения в него всех <Іі>-элементов с их первоначального 
места в ЭОМ, а затем добавления нового <иІ> к телу документа. 

Листинг А.22. Добавление серии <ІІ>-элементов к отдельному <иІ> 


// Создание нового элемента <и1> 
ѵаг иі = боситепб. сгеабеЕІешепб ( "иі"); 

// Обнаружение всех первых элементов <1і> 
ѵаг 1і = боситепб. дебЕІешепбзВуТадЛаше ( "1і" ) ; 

Дог ( ѵаг і = 0; і < Іі.ІепдбЬ; і++ ) { 

// добавление каждого соответствующего <1і> к новому 

// элементу <и1> 

иі. аррепбСЬИб ( 1 і [ і ] ); 

} 

// Добавление нашего нового элемента <и1> к концу тела документа — бобу 
босишепб.Ьобу.аррепбСЬіІб( иі ); 

сІопеІЧосІе( ігие|ТаІ5е ) 

Эта функция является для разработчиков способом упрощения кода за счет создания дубликатов 
существующих узлов, которые затем могут быть вставлены в ЭОМ. Если обычный вызов іпвегІВеГоге или 
аррепбСЫІсІ приведет к физическому перемещению ЭОМ-узла в документе, то функция сІопеІМобе может быть 
использована для создания его дубликата. 

Функция принимает один из аргументов — Ігие или Гаіве. Если передан аргумент Ігие, то клонируется узел 
со всем его содержимым; а если Гаіве, то клонируется только сам узел. В листинге А.23 показан пример 
использования этой функции для клонирования элемента и его добавления к нему самому. 
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Листинг А.23. Обнаружение в документе первого элемента <иІ>, создание его полной копии и добавление 
ее к нему самому 


// Обнаружение первого элемента <и1> 

ѵаг иі = босишепб. дебЕІетепбзВуТадЛате ( "иі")[0]; 

// клонирование узла и добавление его сразу после старого узла 
иі. рагепбЛобе . аррепсІСНіІсІ ( иі. сІопеЛосІе ( бгие ) ); 

сгеаіеЕІетепі( имяТега ) 

Это основная функция, используемая для создания новых элементов внутри ООМ-структуры. Функция 
существует в виде свойства документа, внутри которого вы хотите создать элемент. 

ПРИМЕЧАНИЕ 

Если вы используете ХНТМЦ для которого указан тип контекста (сопіепі-іуре) арріісаііоп/хітііті+хті, 
вместо обычного НТМЦ для которого указан тип контекста іехІ/МІтІ, то вместо функции сгеаіеЕІетепІ: нужно 
использовать функцию сгеаІеЕІетепШЗ. 

Эта функция принимает один аргумент: имя тега создаваемого элемента. В листинге А.24 показан пример 
использования этой функции для создания элемента и помещения в него нескольких других элементов. 

Листинг А.24. Помещение содержимого элемента <р> в элемент <5Ігопд> 


// Создание нового элемента <збгопд> 
ѵаг з = боситепб. сгеабеЕІешепб ("збгопд"); 

// Обнаружение первого абзаца 

ѵаг р = боситепб. дебЕІешепбзВуТадЛаше ("р")[0]; 

// Помещение содержимого <р> в элемент <збгопд> 
иЫІе ( р. ІігзбСПіІсі ) { 

з . аррепбСЬіІсі ( р. ІігзбСЫІсІ ); 

} 

// Помещение элемента <збгопд> (содержащего прежнее содержимое элемента <р>) 

// обратно в элемент <р> 
р. аррепбСПіІсі ( з ); 

сгеаіеЕІетепі№( пространство_имен, имяТега ) 

Эта функция очень похожа на функцию сгеаІеЕІетепІ:, она тоже создает новый элемент, но она также 
предоставляет возможность указать для элемента пространство имен (если, к примеру, элемент добавляется к 
документу ХМІ_ или ХНТМІ.). 

Эта функция принимает два аргумента: пространство имен добавляемого элемента, и имя тега элемента. В 
листинге А.25 показан пример использования этой функции для создания ЭОМ-элемента в допустимом ХНТМЬ 
документе. 
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Листинг А.25. Создание нового ХНТМІ_ <р>-элемента, заполнение его некоторым текстом и добавление его 
к телу документа 


// Создание нового ХНТМЬ-совместимого <р> 

ѵаг р = босшпепб. сгеабеЕІетепбЛЗ ("Ьббр://иш.м3.огд/1 999/хЬбтІ" , "р"); 

// Добавление в элемент <р> некоторого текста 

р. аррепсІСЫІсІ ( босшпепб.сгеабеТехбЛобе( "Иеісоше бо ту зібе." ) ); 

// Добавление элемента <р> в документ 

босшпепб.Ъобу. іпзегбВебоге ( р, боситепб . Ъобу. бігзбСЬіІсІ ); 

сгеаіеТехіІЧосІеС тесктоваяСтрока ) 

Это подходящий способ создания новой текстовой строки для вставки ее в ООМ-документ. Поскольку 
текстовые узлы это всего лишь существующая только в ООМ оболочка текста, важно помнить, что они не могут 
быть стилизованы или дополнены. Эта функция существует только как свойство ЭОМ-документа. 

Функция принимает один аргумент: строку, которая станет содержимым текстового узла. В листинге А.26 
показан пример использования этой функции для создания нового текстового узла и добавления его к телу НТМІ_- 
страницы. 

Листинг А.26. Создание элемента <М1> и добавление нового текстового узла 


// Создание нового элемента <Ы> 
ѵаг Ъ. = босшпепб. сгеабеЕІетепб ("Ы"); 

// Создание текста заголовка и добавление его к элементу <Ы> 

Ъ.. аррепсІСЫІсІ ( босшпепб . сгеабеТехбЛобе ("Главная страница") ); 

// Добавление заголовка в начале <Ьобу> 

босшпепб . Ъобу. іпзегбВебоге ( Ь, босшпепб . Ъобу. бігзбСЬіІсІ ); 

іппегНТМІ_ 

Это свойство, характерное для НТМб ЭОМ, предназначено для обращения к текстовой версии НТМб- 
содержимого ЭОМ-элемента и работе с ним. Если вы работаете только с НТМб-документом (который не имеет 
отношения к ХМІ_), этот метод может быть очень полезным, поскольку код, который нужен для генерации нового 
ЭОМ-элемента, может быть существенно сокращен (если не считать, что это более быстрая альтернатива 
традиционным ООМ-методам). Хотя это свойство не входит ни в один ѴѴЗС-стандарт, оно все же существует во 
всех современных браузерах. 

В листинге А.27 показан пример использования свойства іппегНТМб для изменения содержимого элемента 
при изменении содержимого <1:ех(:агеа>. 

Листинг А.27. Отслеживание изменения в <(:ехіагеа> и обновление предварительного просмотра его 
значением в реальном времени 


// Получение бехбагеа для отслеживания обновлений 
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ѵаг б = боситепб .дебЕіетепбзВуТадЛате("бехбагеа") [0] ; 


// Захват текущего значения <бехбагеа> и обновление предварительного 
// просмотра в реальном времени при каждом изменении 
б.опкеургезз = бипсбіоп() { 

боситепб . дебЕІешепбВуІсІ ( "ргеѵіем") . іппегНТМЬ = біііз.ѵаіие; 

} ; 


іп5егІВе?оге( узелДляВставки, узелПередКоторымВставлять) 

Эта функция используется для вставки ЭОМ-узла в любое место документа. Она должна быть вызвана для 
родительского элемента узла, перед которым нужно сделать вставку. Так сделано для того, чтобы вы могли 
указать пиІІ в качестве узла, перед которым нужно сделать вставку, чтобы ваш узел был вставлен в качестве 
последнего дочернего узла. 

Функция принимает два аргумента. Первый аргумент является узлом, который нужно вставить в РОМ, а 
второй — это ЭОМ-узел, перед которым будет осуществлена вставка. Он должен ссылаться на существующий 
узел. В листинге А.28 показан пример использования этой функции для вставки значка сайта (который 
предшествует ІІЯІ_ в адресной строке браузера) рядом с набором ІЖІ_ веб-сайтов на странице. 

Листинг А.28. Проход по всем элементам <а> и добавление изображения значка веб-сайта 


// Обнаружение в документе всех ссылок <а> 
ѵаг а = боситепб. дебЕІетепбзВуТадЛате ("а"); 
бог ( ѵаг і = 0; і < а.іепдбіі; і++ ) { 

// Создание изображения значка веб-сайта, на который указывает 
// ссылка 

ѵаг ішд = боситепб .сгеабеЕІешепб("ішд"); 

ішд.згс = а[і]. Ьгеб .зрііб('/').зріісе(0,3).)оіп('/') + '/баѵісоп.ісо'; 

// Вставка изображения перед ссылкой 
а[і]. рагепбЛобе .іпзегбВебоге( ішд, а[і] ); 

} 

гетоѵеСНіІсІ( удаляемыйУзел ) 

Эта функция используется для удаления узла из ООМ-документа. Функция гетоѵеСІііІсІ должна быть 
вызвана для родительского элемента того узла, который нужно удалить. 

Функция принимает один аргумент: ссылку на ЭОМ-узел, удаляемый из документа. В листинге А.29 
показан пример ее запуска в отношении всех <сііѵ>-элементов документа и удаления каждого из них, который 
имеет особый класс ѵѵагпіпд. 

Листинг А.29. Удаление всех элементов, которые имеют особое имя класса 


// Обнаружение всех элементов <біѵ> 

ѵаг сііѵ = босишепб . дебЕІешепбзВуТадЛаше ( "сііѵ" ) ; 

бог ( ѵаг і = 0; і < сііѵ. ІепдбЬ; і++ ) { 
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// Если значение класса <сііѵ> равно 'иагпіпд' 
іб ( сііѵ[і] .сІаззЛаше == "иагпіпд" ) { 

// Удалить <сііѵ> из документа 

сііѵ [ і ] . рагепбЛосІе . гетоѵеСЬіІсІ ( сііѵ[і] ); 


} 

} 

герІасеСНМсІ( вставляемыйУзел, заменяемыйУзел ) 

Эта функция служит альтернативой процессу удаления узла и вставляет на его место другой узел. Она 
может быть вызвана родительским элементом заменяемого узла. 

Эта функция принимает два аргумента: узел, который нужно вставить в ЭОМ, и узел, который вы 
собираетесь заменить. В листинге А.30 показан пример замены всех элементов <а> элементом <з(:гопд>, 
содержащим ІЖІ_, на который первоначально была сделана ссылка. 

Листинг А.30. Преобразование набора ссылок в обычные ІЖІ_ 


// Преобразование всех ссылок в видимые ІЖЬ (что хорошо подойдет для 
// распечатки) 

// Обнаружение в документе всех ссылок <а> 
ѵаг а = боситепб. дебЕІешепбзВуТадЛаше ("а"); 
иЫІе ( а.ІепдбН ) { 

// Создание элемента <збгопд> 

ѵаг з = боситепб. сгеабеЕІешепб ("збгопд"); 

// Создание содержимого, эквивалентного ІЖЬ, на который ссылается <а> 
з . аррепбСЬіІсі ( босишепб . сгеабеТехбЛосІе ( а[і].Пгеб ) ); 

// Замена исходного <а> новым элементом <збгопд> 
а [ і ] . герІасеСЬіІсІ ( з, а[і] ); 

} 
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Приложение Б Справочник по событиям 

Это приложение служит справочником для главы 6, посвященной событиям. Оно предоставляет полное 
описание всех возможных ЭОМ-событий и дополняет общую теорию, представленную в главе 6. Здесь вы найдете 
источники дополнительной информации, определения общепринятой терминологии, связанной с событиями, и 
объяснения всех общих объектов событий и взаимодействия с ними. 

Источники информации 

Если выбирать только один источник информации, к которому нужно обратиться за дополнительными 
сведениями о событиях, то это (Зиігкзппосіе.огд. Этот веб-сайт предоставляет сравнительную характеристику для 
каждого события во всех современных браузерах. Я настоятельно рекомендую на него зайти и составить 
представление о том, какие события поддерживает каждый из браузеров 
(И1:ф://ѵѵотм.риігк5тосІе.огд/]5/еѵепі5_сотріпГо.І'іІ:тІ). 

Кроме этого были использованы две наиболее популярные спецификации: ѴѴЗС ЭОМ-события и Іпіегпеі: 
Ехріогег НТМІ_-события. На каждом веб-сайте имеется подробный список всех возможных событий и изложена 
каждая особенность их поведения: 

• ѴѴЗС ЭОМ І_еѵеІ 2 еѵепііз: М1:1:р://ѵѵѵѵ\л/.ѵѵ3.огд/ТРІ/ООМ-ЕеѵеІ-2-Еѵеп(:5/еѵеп(:5.Іп1:тІ 

• Іпіегпеі: Ехріогег НТМІ_ еѵепіз: ІтирѴ/тзсІп.тісгоБоГСсот/ѵѵогкзІ'іор/аиІіІ'іог/сІІ'іІітІ/геГегепсе/еѵепІіз.азр 

Терминология 

В этом разделе определяется ряд новых терминов, введенных по теме обработки событий в ЗаѵаЗсгірІ:, 
которые могут быть незнакомы для тех , кто не работал с событиями Эа ѵаЗсгі рС, или с асинхронной обработкой 
событий. 

Асинхронный 

Асинхронные события имеют общую структуру обратного вызова, в отличие от потоковой прикладной 
структуры. Это означает, что какой-то единственный фрагмент кода (обратный вызов) зарегистрирован в качестве 
обработчика события. При наступлении события выполняется обратный вызов. 

Прикрепление / Привязка / Регистрация обратного вызова 

Прикрепление (иногда называемое привязкой) обратного вызова к обработчику события является 
регистрацией кода в асинхронной модели события. Как только событие произойдет, вызывается обработчик 
события, в котором содержится ссылка на зарегистрированный обратный вызов. Этот обратный вызов является 
частью кода в форме функции, которая вызывается по ссылке, как только завершится наступление события. 

Всплытие 

Фаза всплытия события происходит после фазы захвата, относящейся к этому событию. Эта фаза 
начинается с источника события (такого как ссылка, на которой щелкнул пользователь) и перемещается вверх 
под дереву ЭОМ к корневому элементу документа. 

Захват 

Фаза захвата (возникающая только в модели события ѴѴЗС) это первая имеющая место фаза события, 
которая состоит из перемещения события вниз по дереву ЭОМ к местоположению элемента, которому 
приписывается событие. 
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Исходное действие (или действие по умолчанию) 

Исходное действие предопределяется браузером и совершается независимо от того, имеет пользователь 
привязанный обработчик события, или нет. Примером исходного действия, предоставляемого браузером может 
послужить переход на другую веб-страницу по щелчку пользователя на ссылке. 

Событие 

Событие — действие, которое запущено (инициировано) в пределах веб-страницы. Как правило, события 
инициируются пользователем (например, перемещение указателя мыши, нажатие клавиши и т.д.), но могут 
возникать и без участия пользователя (например, загрузка страницы, или возникновение ошибки). 

Обработчик события 

Обработчик события (в частности, ссылка на функцию) является кодом, который вызывается при 
наступлении события. Если в качестве обработчика события не был зарегистрирован обратный вызов, то ничего 
не произойдет (кроме исходного действия). 

Потоковый 

В потоковом приложении обычно существует несколько отдельно текущих процессов, выполняющих 
постоянную задачу (к примеру, отслеживание доступности ресурса). ІаѵаБсгірІ: не занимается какой-либо 
обработкой потоков, и является чисто асинхронным языком. 

Объект события 

Объект события является объектом, предоставляемым или доступным внутри каждой функции обработчика 
события. Их работа в Іпіегпеі: Ехріогег и в других браузерах происходит по-разному. 

Браузеры, совместимые со спецификацией ѴѴЗС, предоставляют функции обработчика события 
единственный аргумент, в котором содержится ссылка на объект события. В Іпіегпеі; Ехріогег объект события 
всегда доступен в свойстве ѵѵіпсіоѵѵ.еѵепі:, доступ к которому может быть открыт только в обработчике события. 

Общие свойства 

Для любого типа захваченных событий в объекте события имеется ряд свойств. Все эти свойства объекта 
события относятся непосредственно к самому событию и не содержат никакой специфики, относящейся к типу 
события. Далее приводится список всех свойств объекта события с пояснениями и примерами кода. 

іуре 


Это свойство содержит имя текущего инициированного события (например, сііск, тоизеоѵег и т.д.). Оно 
может быть использовано для предоставления универсальной функции обработки события, которая затем 
предопределенно выполнить соответствующие функции (например, функции асІсіЕѵепі/гетоѵеЕѵепІ:, 
рассмотренные в главе 6). В листинге Б.1 показан пример использования этого свойства для создания 
обработчика, производящего различный эффект в зависимости от типа обрабатываемого события. 

Листинг Б.1. Использование свойства Іуре для придания элементу возможности изменения при 
прохождении над ним указателя мыши 

// Обнаружение <сііѵ>,для которого создается эффект прохождения 
ѵаг сііѵ = босишепб . дебЕІешепбзВуТадЛаше ( ' сііѵ ' ) [0]; 
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// Привязка одной и той же функции к обоим событиям тоизеоѵег и тоизеоиб 
сііѵ . оптоизеоѵег = сііѵ . оптоизеоиб = бипсбіоп(е){ 

// Нормализация объекта события 
е = е | | міпсіом.еѵепб; 

// Переключение цвета фона <сііѵ>, в зависимости от типа 
// возникшего события мыши 

бЫз. збуіе .Ьаскдгоипб = (е.буре == 'тоизеоѵег') ? '#ЕЕЕ' : '#ЕЕЕ'; 

} ; 


Іа где* / згсЕІетеп* 

Это свойство содержит ссылку на элемент, который инициировал событие. Например, привязка 
обработчика щелчка (сііск), к элементу <а> приведет к тому, что свойство ЬагдеЬ будет равно самому элементу 
<а>. Свойство згсЕІетепІ; является эквивалентом свойства Са гдеі;, но работает в Іпіегпеі; Ехріогег. В листинге Б.2 
показан пример использования этого свойства для работы с глобальным обработчиком событий. 

Листинг Б.2. Двойной щелчок на узле, принадлежащем НТМ1_ ЭОМ, приводит к его удалению 

// Привязка к документу отслеживателя двойного щелчка 
боситепб . опсОоІсІіск = бипсбіоп(е) { 

// Нормализация объекта события 
е = е || вдіпсіом.еѵепб; 

// Обнаружение правильного целевого узла 
ѵаг б = е.багдеб || е. згсЕІешепб; 

// удаление узла из БОМ 
б . рагепбЛобе . гетоѵеСНіІсІ ( б ); 

} ; 

5*орРгорада*іоп() / сапсеІВиЬЫе 

Метод 5ІорРгорада1;іоп() останавливает процесс всплытия (или захвата) события, делая текущий элемент 
последним получателем данного события. Фазы события подробно рассмотрены в главе 6. Свойство сапсеІВиЬЫе 
доступно в Іпіегпеі; Ехріогег; если установить его значение в (тие, то это будет эквивалентно вызову метода 
5ІорРгорадаЬоп() для ѴѴЗС-совместимых браузеров. В листинге Б.З показан пример использования этой 
технологии для прекращения распространения события. 

Листинг Б.З. Динамическая подсветка всех элементов <1і>, имеющихся в документе 

// Обнаружение в документе всех элементов <1і> 
ѵаг 1і = босшпепб. дебЕІешепбзВуТадЛате (' 1і'); 
бог ( ѵаг і = 0; і < Іі.ІепдбП; і++ ) { 

// Отслеживание прохождения над <1і> указателя мыши 
1і[і].оптоизеоѵег = бипсбіоп(е){ 

// Если браузер МЗС-совместимый 
іб ( е ) 

// Использование зборРгородабіоп для остановки всплытия 
е.зборРгорадабіоп(); 
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// Если нет, то это ІпкегпеЬ Ехріогег 
еізе 

// поэтому для остановки всплытия сапсеІВиЬЫе 
// устанавливается в Ьгие 
е . сапсеІВиЬЫе = Ьгие; 

// В заключение, подсветка фона элемента <1і> 

Ытіз . збуіе . Ъаскдгоипсі = ' #ЕЕЕ ' ; 


// Когда указатель мыши уходит с <1і> 

1і [ і ].оптоизеоиЬ = ЬипсЬіоп () { 

// Переключение фонового цвета обратно на белый 
ЬПіз . збуіе . Ъаскдгоипсі = '#ЕЕЕ'; 

} ; 

} 

ргеѵепЮеГаиІіО / геІигпѴаІие = ^аізе 

Вызов метода ргеѵепЫеІаиІІО останавливает выполнение исходного действия браузера во всех 
современных ѴѴЗС-совместимых браузерах. В ІпЬегпеІ; Ехріогег, чтобы остановить выполнение исходного действия 
браузера, нужно установить значение свойства геІигпѴаІие, принадлежащее объекту события, в Гаізе. 

Объяснение процесса выполнения исходного действия приведено в главе 6. Код в листинге Б.4 делает так, 
что при каждом щелчке на расположенной на странице ссылке, вместо перехода на другую страницу (как это 
обычно происходит), заголовок документа становится ІЖІ_ ссылки. 

Листинг Б.4. Предотвращение исходного действия браузера 

// Обнаружение на странице всех элементов <а> 
ѵаг а = ЬосшпепЬ. деЬЕІешепЬзВуТадЛаше ('а'); 
бог ( ѵаг і = 0; і < а.ІепдЫт; і++ ) { 

// Привязка к <а> обработчика щелчка 
а[і].опс1іск = ЬипсЬіоп(е) { 

// Установка заголовка страницы в качестве ІЖЬ этой ссылки, вместо 
// перехода по прежнему ІЖЬ 
ЬосшпепЬ . ЬіЫе = Ытіз.Ьгеб; 

// Предотвращение визитов браузера на веб-сайт, указанный в 
// <а> (что является его исходным действием) 
іЬ ( е ) { 

е.ргеѵепЬВебаиІЬ (); 

// Предотвращение действия по умолчанию в ІЕ 
} еізе { 

вдіпсіоад. еѵепб . гебигпѴаІие = Ьаізе; 

} 

}; 
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} 

Свойства мыши 

Свойства мыши существуют в объекте события только при инициации событий, связанных с мышью (среди 
которых сііск, тоизесіоѵѵп, тоивеир, тоивеоѵег, тоиветоѵе и тоизеоиі). Во всех остальных случаях можно 
считать, что возвращенные значения не существуют или наверняка отсутствуют. В этом разделе приводится 
перечень всех свойств, которые присутствуют в объекте события в то время, когда имеет место событие, 
связанное с мышью. 

сІіепіХ / сІіепіУ 

Это свойство содержит координаты х и у указателя мыши относительно окна браузера. Пример 
использования этого свойства показан в листинге Б.5. 

Листинг Б.5. Определение текущей позиции указателя мыши на веб-странице 

// Определение горизонтальной позиции указателя 
бипсбіоп дебХ(е) { 

// Сначала проверка позиции в не-ІЕ браузере, потом в ІЕ, 

// и только потом возвращение нуля 
гебигп е.радеХ || (е.сІіепбХ + 

(боситепб . боситепбЕІетепІ; . зсгоНЬебб | | боситепб .бобу. зсгоНЬебб) ) ; 

} 

// Определение вертикальной позиции указателя 
Еипсбіоп дебУ(е) { 

// Сначала проверка позиции в не-ІЕ браузере, потом в ІЕ, 

// и только потом возвращение нуля 
гебигп е.радеУ || (е.сІіепбУ + 

(боситепб. боситепбЕІетепб . зсгоІІТор || боситепб.бобу. зсгоІІТор) ); 

радеХ / радеУ 

Эти свойства содержат координаты х и у указателя мыши относительно отображаемого документа (к 
примеру, если вы прокрутили документ вниз, значения уже не будут соответствовать тем, что содержатся в 
свойствах сІіепІХ/сІіепІУ). В ІпІегпеі Ехріогег эти свойства не работают. Чтобы получить позицию курсора в ІЕ, 
нужно воспользоваться свойствами сІіепбХ/сІіепбУ, и добавить к ним текущее смещение прокрутки. 

ІауегХ / ІауегУ и оТСзеІХ / оІТзеіУ 

Эти свойства содержат координаты х и у указателя мыши относительно элемента назначение события. 
Свойства ІауегХ/ІауегУ доступны только в браузерах, работающих на движке МоііІІа и Заіагі, а свойства 
оІІзеІХ/оГГвеІУ доступны в Орега и ІпІегпеІ Ехріогег. (Примеры их использования можно посмотреть в 
листинге Б.17.) 

ЬиНоп 

Это свойство содержит число, представляющее кнопку мыши, нажатую в данный момент (доступно только 
в событиях сііск, тоивесіоѵѵп и тоизеир). К сожалению, в представлении соответствия чисел нажатой кнопке тоже 
присутствует некоторая неразбериха. Хорошо, что хоть число 2 используется во всех браузерах для 
представления щелчка правой кнопкой, и вы можете чувствовать себя вполне свободно хотя бы при проверке 
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щелчка этой кнопкой. В таблице Б.1 показаны все возможные значения свойства ЬиШэп как в Іпіегпеі Ехріогег, 
так и в ѴѴЗС-совместимых браузерах. 

Таблица Б.1. Возможные значения для свойства Ьиііоп объекта события 


Щелчок 

Іпіегпеі Ехріогег 

\ѵзс 

Левой кнопкой 

1 

0 

Правой кнопкой 

1 

0 

Средней кнопкой 

4 

1 


В листинге Б.6 показан фрагмент кода, предотвращающий пользовательский щелчок правой кнопкой 
мыши (и вызов контекстного меню) в любом месте веб-страницы. 


Листинг Б.6. Использование свойства ЬиИоп объекта события 

// Привязка обработчика щелчка ко всему документу 
боситепб. опсііск = бипсбіоп(е) { 

// Нормализиция объекта события 
е = е || вдіпсіом.еѵепб; 

// Если произведен щелчок правой кнопкой мыши 
іб ( е.Ъиббоп== 2 ) { 

// Предотвращение выполнения исходного действия 
е . ргеѵепбБебаиІб () ; 
гебигп баізе; 

} 

} ; 

геІаіесІТагдеі 

Это свойство события содержит ссылку на элемент, пространство которого указатель мыши только что 
покинул. Почти всегда оно используется в ситуациях, когда нужно воспользоваться событиями 
тоивеоѵег/тоизеоиі:, но вам нужно знать, где указатель только что был, или по какому элементу он проходит. В 
листинге Б.7 показан вариант древовидного меню (элементы <оІ> содержат другие элементы <оІ>) в котором 
поддеревья отображаются в первый раз только тогда, когда пользователь перемещает элемент над подэлементом 
<ІІ>. 


Листинг Б.7. Использование свойства геІабесіТа гдеЕ для создания дерева, по которому можно перемещаться 

// Обнаружение всех элементов <1і>, содержащихся в документе 
ѵаг 1і = боситепб. дебЕІетепбзВуТадЛате (' 1і '); 
бог ( ѵаг і = 0; і < Іі.ІепдбП; і++ ) { 

// и прикрепление к ним обработчика события шоизеоѵег 
1і[і].опшоизеоѵег = бипсбіоп(е){ 

// Если указатель мыши входит на элемент в первый раз (от родителя) 
іб ( е.геІабебТагдеб == бПіз. рагепбЛобе ) { 

// отображение последнего дочернего элемента (который 
// является другим <о!>) 
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} ; 


} 


біііз . ІазбСПіІсІ. збуіе .сіізріау = 'Ыоск'; 


// Пример НТМЬ: 

<о1> 

<1і>Не11о <о1> 

<1і>АпобПег</ 1і> 

<1і>Ібет</1і> 

</оіх/1і> 

<1і>Тезб <о1> 

<1і>Моге</1і> 

<1і>Ібетз</1і> 

</оІХ/1і> 

</о1> 

Свойства клавиатуры 

Обычно свойства клавиатуры существуют в объекте события только при инициации событий, связанных с 
клавиатурой (среди которых кеугіоѵѵп, кеуир и кеургевв). Исключение из этого правила относится к свойствам 
сМКеу и зИ И^ІіКеу, которые доступны во время наступления событий, связанных с мышью (позволяя вам 
отслеживать СМСІІск на элементе). Во всех остальных случаях можно считать, что значения, содержащиеся в 
свойстве, не существуют или наверняка отсутствуют. 

сігІКеу 

Это свойство возвращает булево значение, отображающее, нажата ли клавиша От Оно доступно для 
событий, связанных как с клавиатурой, так и с мышью. Код в листинге Б.8 отслеживает пользовательский щелчок 
мышью и удержание клавиши сопігоі; когда это происходит, элемент, на котором произошел щелчок, удаляется из 
документа. 

Листинг Б.8. Применение свойства сЬгІКеу для создания разновидности взаимодействия, использующего 
щелчок мыши 

// Привязка обработчика щелчка ко всему документу 
босшпепб . опсііск = бипсбіоп (е) { 

// Нормализация объекта события 

е = е | | вдіпсіом.еѵепб; 

ѵаг б = е.багдеб || е. згсЕІешепб; 

// Если клавиша сопбгоі удерживается нажатой во время щелчка, 
іб ( е.сбгІКеу ) 

// удаление узла, на котором произведен щелчок 
б . рагепбЛобе . гешоѵеСПіІсі ( б ); 

} ; 


кеуСосІе 

Это свойство содержит число, соответствующее различным клавишам клавиатуры. Возможность 
использования конкретных клавиш (таких как Раде IIр и Ноте) может варьироваться, но вообще-то все другие 
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клавиши работают вполне надежно. В табл. Б.2 дается справка по всем часто используемым клавишам и 
связанных с ними кодам. 

Таблица Б.2. Наиболее часто используемые коды клавиатуры 


Клавиша 

Код клавиши 

Забой (Васкзрасе) 

8 

Табуляция (ТаЬ) 

9 

Ввод (Епісг) 

13 

Пробел 

32 

Стрелка влево 

37 

Стрелка вверх 

38 

Стрелка вправо 

39 

Стрелка вниз 

40 

0-9 

48-57 

А-2 

65-90 


В листинге Б.9 показан код, необходимый для запуска простого показа слайдов. В этом коде 
предполагается наличие ряда <Іі>-элементов внутри единственного элемента <оІ> или <иІ>. Каждый элемент 
<ІІ> может содержать все что угодно (например, изображение). Когда нажимаются клавиши стрелок вправо и 
влево, пользователю показывается следующий или предыдущий элемент <ІІ>. 

Листинг Б.9. Использование свойства кеуСосІе для создания простого показа слайдов 

// Обнаружение первого элемента <1і> на странице 
ѵаг сиг = боситепб. дебЕІетепбзВуТадЦате (' 1і ') [0] ; 

// и обеспечение его видимости 
сиг. збуіе . бізріау = 'Ыоск'; 

// отслеживание любого нажатия клавиши на странице 
боситепб.опкеуир = бипсбіоп(е){ 

// Нормализация объекта события 
е = е || вдіпсіом.еѵепб; 

// Если нажаты клавиши левой или правой стрелок 
іб ( е.кеуСобе ==37 || е.кеуСобе == 39 ) { 

// скрытие текущего отображаемого <1і>-элемента 
сиг. збуіе . бізріау = 'попе'; 

// Если нажата клавиша левой стрелки, обнаружение 
// предыдущего <1і>-элемента 

// (или циклический переход на самый последний элемент) 
іб ( е.кеуСобе == 37 ) 

= сиг. ргеѵіоизЗіЫіпд | | сиг. рагепбЛосІе . ІазбСкіІсІ; 


сиг 
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// Если нажата клавиша правой стрелки, обнаружение следующего 
// <1і>-элемента, или, если текущий элемент был последним, 

// возвращение к первому <1і>-элементу 
еізе іб ( е.кеуСобе == 39 ) 

сиг = сиг. пехбЗіЫіпд | | сиг. рагепкЛосІе . бігзбСЬіІсІ; 

// показ очередного <1і>-элемента последовательности 
сиг. збуіе . бізріау = 'Ыоск'; 

} 

} ; 

зНіККеу 

Это свойство возвращает булево значение, отображающее, нажата ли клавиша БЫЛ. Оно доступно для 
событий, связанных как с клавиатурой, так и с мышью. Код в листинге Б.8 отслеживает пользовательский щелчок 
мышью и удержание клавиши 5ЫП; когда это происходит, отображается контекстное меню. 

Листинг Б. 10. Использование свойства вЫІбКеу для отображения специального меню 

// Привязка обработчика щелчка ко всему документу 
босишепб. опсііск = бипсбіоп (е) { 

// Нормализация объекта события 
е = е || міпбом.еѵепб; 

// Если клавиша ЗЫбб удерживается нажатой при совершении щелчка, 
іб ( е.зМббКеу ) 

// Отображение щелчка 

боситепб . дебЕІетепбВуІсІ ( ' шепи ' ) . збуіе . бізріау = 'Ыоск'; 

} ; 


События страницы 

Все события страницы работают конкретно с функционированием и состоянием всей страницы. 
Большинство типов событий имеют дело с загрузкой и выгрузкой страницы (когда пользователь посещает 
страницу, а затем снова ее покидает). 

ІоасІ 


Событие Іоасі возникает, когда страница полностью завершает свою загрузку; это событие включает 
загрузку всех изображений, внешних файлов ІаѵаБсгірі:, и внешних файлов С5Б. Оно может быть использовано в 
качестве способа запуска вашего ООМ-зависимого кода, но, если нужно ускорить время реакции, можно 
обратиться к функции ботКеасІуО, рассмотренной в главе 6. 

В листинге Б.Ппоказан код, ожидающий загрузки страницы, после чего он привязывает обработчик 
щелчка к элементу, значение Ю которого равен сапсеі. Как только будет запущен обработчик события, он скроет 
элемент, Ю которого равен таіп. 

Листинг Б.11. Использование события Іоасі для ожидания окончания загрузки всей страницы 

// Ожидание завершения загрузки страницы 
міпсіои . опіоасі = бипсбіоп () { 
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// Обнаружение элемента, значение ІБ которого равно ' сапсеі' и привязка 
// к нему обработчика щелчка 

босшпепб. дебЕІетепбВуІсІ (' сапсеі '). опсііск = бипсбіоп () { 


// Затем при щелчке скрыть элемент 'таіп' 

боситепб . дебЕІетепбВуІсІ ( ' таіп ' ) . збуіе . бізріау = 'попе'; 

} ; 

} ; 


Ьеіогеипіоасі 

Это несколько неординарное событие, поскольку оно совершенно не стандартное, но широко 
поддерживаемое. Оно ведет себя очень похоже на событие ипіоагі, но с одной существенной разницей. Если из 
обработчика события ЬеГогеипІоасІ будет возвращена строка, она появится в подтверждающем сообщении, 
спрашивающем пользователей, хотят ли они покинуть текущую страницу. Если ответ будет отрицательным, 
пользователь останется на текущей странице. Динамические веб-приложения, вроде ОтаіІ, используют его, чтобы 
уберечь пользователей от потенциальных потерь любых несохраненных данных. 

В листинге Б. 12 к событию прикрепляется простой обработчик (который всего лишь возвращает строку), 
объясняющий, почему пользователь не должен покидать текущую страницу, на которой он находится. Браузер 
отобразит окно подтверждения с полным объяснением, включая составленное вами сообщение. 

Листинг Б. 12. Использование события Ьеіогеипіоасі для удержания пользователей от ухода со страницы 

// Прикрепление обработчика к Ъебогеипіоаб 
міпсіои . опЬебогеипІоасі = бипсбіоп () { 


// Возвращение объяснения, почему пользователю не нужно покидать 
// страницу. 

гебигп 'Ваши данные не было сохранены.'; 


еггог 


Событие еггог возникает при обнаружении ошибки в коде ІаѵаБсгірІ;. Оно может послужить для перехвата 
сообщений об ошибках и их отображения, или для того чтобы успешно справиться с возникшей ошибкой. 
Обработчик этого события ведет себя не так как все остальные обработчики, вместо того, чтобы передать объект 
события, он передает сообщение, поясняющее суть возникшей ошибки. 

В листинге Б. 13 показан самостоятельно разработанный способ обработки и отображения сообщений об 
ошибках в маркированном списке в отличие от вывода их в традиционную консоль ошибок. 

Листинг Б.13. Использование события еггог для ведения просматриваемого журнала регистрации ошибок 


// Прикрепление обработчика события еггог 
міпсіои . опеггог = бипсбіоп ( теззаде ){ 

// Создание элемента <1і>, чтобы сохранить сообщение об ошибке 
ѵаг 1і = босшпепб. сгеабеЕІешепб (' 1і '); 
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Іі.іппегНТМЬ = теззаде; 

// Обнаружение нашего списка ошибок (ІБ элементов которого имеет 
// значение 'еггогз') 

ѵаг еггогз = боситепб . дебЕІетепбВуІб (' еггогз ') ; 

// и добавление нашего сообщения об ошибке к верхней части списка 
еггогз. іпзегбВебоге ( 1і, еггогз. СігзбСіііІб ); 


гезіге 

Событие геБІге возникает, как только пользователь изменяет размер окна браузера. Когда пользователь 
корректирует размер окна браузера, событие ге5ііе возникнет только когда процесс завершится, но не в ходе его 
выполнения. 

В листинге Б. 14 показан код, отслеживающий случаи уменьшения пользователем размеров окна браузера 
до определенных пределов, применяя дополнительный класс к элементу сіоситепі; (чтобы предоставить лучшее 
стилевое оформление документа для меньшего по размерам окна). 

Листинг Б. 14. Использование события гезіге для динамического изменения размера элемента 

// Отслеживание изменения размеров окна пользователем 
міпбои. опгезіге = бипсбіоп () { 

// Обнаружение элемента боситепб 
// (используемого для определения ширины окна) 
ѵаг сіе = боситепб . боситепбЕІешепб; 

// Определение ширины окна браузера 
// (К сожалению, каждый браузер предпочитает делать это 
// по-своему) 

ѵаг м = міпсіом . іппегМісНсЪ. | | (бе && бе . сііепбИіббЬ) 

I босишепб.Ьобу. сііепбИіббЬ; 

/ / Если окно уменьшилось до определенных пределов 
// добавить класс к элементу босишепб 
бе.сІаззЛаше = м < 990 ? 'зшаіі' : 11 ; 

} ; 


5СГОІІ 


Событие зсгоІІ возникает, когда пользователь перемещает позицию документа в окне браузера. Оно может 
возникнуть в результате нажатия клавиши (использования клавишей стрелок. Раде бІр/Ооѵѵп или пробела) или 
путем использования полосы прокрутки. 

ипіоасі 

Это событие возникает, когда пользователь покидает текущую страницу (возможно, он щелкнул на ссылке, 
на кнопке возврата или даже закрыл окно браузера). Предотвращение исходного действия для этого события не 
работает (другим событием, представляющим интерес в этом плане является ЬеГогеипІоаб). 
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В листинге Б.15 показан код, привязывающий обработчик к событию ипіоасі, показывающий пользователю 
сообщение, когда тот покидает текущую страницу. 

Листинг Б.15. Событие ипіоасі 

// Отслеживание момента, когда пользователь покидает веб-сайт 
міпсіои . опипіоасі = бипсбіоп(){ 

// Отображение сообщения для пользователя с благодарностью за визит 
аіегб ( 'Спасибо, что Вы нас посетили!' ); 

} ; 


События пользовательского интерфейса (ІЛ) 

События пользовательского интерфейса относятся к тому, как пользователь взаимодействует непосредственно с браузером или с 
элементами страницы. Они помогают определить, с какими элементами страница пользователь взаимодействует в 
настоящий момент, и предоставить этим элементам дополнительное информационное наполнение (например, 
подсветку или вспомогательные меню). 

ІОСІІ5 


Событие Іосііз является способом определения, где в настоящий момент находится курсор страницы. По 
умолчанию он находится внутри всего документа; но по щелчку на ссылке или на элементе ввода формы, или по 
переходу на них с использованием клавиши табуляции, фокус перемещается на эти элементы. (Пример 
использования этого события показан в листинге Б. 18.) 

Ыиг 


Событие Ыиг возникает когда пользователь переводит фокус с одного элемента на другой (в пределах 
содержимого ссылок, элементов ввода или самой страницы). (Пример использования этого события показан в 
листинге Б.18.) 

События мыши 

События мыши возникают либо когда пользователь перемещает указатель мыши, либо когда он щелкает 
одной из ее кнопок. 

сііск 


Событие сііск возникает, когда пользователь нажимает левую кнопку мыши на элементе (см. событие 
тоизесіоѵѵп) и отпускает ее (см. событие тоизеир) на том же самом элементе. В листинге Б. 16 показан пример 
использования события сііск для предотвращения перехода по ссылке, которая ссылается на текущую страницу. 

Листинг Б. 16. Отключение всех попыток щелчков по ссылкам, указывающим на текущую страницу 

// Обнаружение всех имеющихся в документе элементов <а> 
ѵаг а = босшпепб. дебЕІетепбзВуТадЛате ('а'); 
бог ( ѵаг і = 0; і < а.ІепдбЬ; і++ ) { 

// Если ссылка указывает на ту же самую страницу, на которой мы 
// находимся 

іб ( а[і].Ьгеб == иіпсіом. Іосабіоп. Ьгеб ) { 
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// превращение ее в 'недействующую' по щелчку 
а[ і ]. опсііск = бипсбіоп (е){ 
гебигп баізе; 

} ; 

} 

} 

сІЫсІіск 

Событие бЫсІіск возникает после того, как пользователь достаточно быстро совершил два щелчка. 
Временной диапазон двойного щелчка зависит от настроек операционной системы. 

тоизесіоѵѵп 

Событие тоизесіоѵѵп возникает, когда пользователь нажимает кнопку мыши. В отличие от события 
кеубоѵѵп, это событие возникает при нажатии кнопки лишь один раз. Пример использования этого события 
показан в листинге Б.17. 

тоизеир 

Событие гпоивеир возникает, когда пользователь освобождает ранее нажатую кнопку мыши. Если кнопка 
освобождается на том же самом элементе, на котором она была нажата, то в дополнение к этому событию 
возникает также и событие сііск. Пример использования этого события показан в листинге Б. 17. 

тоизетоѵе 

Событие тоизетоѵе возникает, когда пользователь перемещает указатель мыши по странице хотя бы на 
один пиксел. Сколько событий тоизегпоѵе произойдет (за полное перемещение указателя мыши) зависит от того, 
насколько быстро пользователь перемещает мышь, и насколько быстро браузер успевает обновлять положение 
курсора. В листинге Б.17 показан пример простого перетаскивания. 

Листинг Б. 17. Элементы со значением класса бгаддаЫе могут быть перетащены пользователем 

// Инициализация всех переменных, которые будут использованы 
ѵаг сигБгад, огідХ, огідУ; 

// Отслеживание каждого нажатия кнопки мыши на элементе 
босшпепб . оптоизебомп = бипсбіоп (е) { 

// Нормализация объекта события 
е = біхЕѵепб ( е ); 

// Перетаскиваются только элементы, имеющий класс 'бгаддаЫе' 
іб ( е.багдеб. сІаззИате == 'бгаддаЫе' ) { 

// Текущий перетаскиваемый элемент 
сигБгад = е.багдеб; 

// Запоминание начальной позиции указателя мыши и местоположения 
// элемента 

огідХ = дебХ( е ) + (рагзеіпб ( сигБгад. збуіе . Іебб ) | 0); 

огідУ = дебУ( е ) + (рагзеіпб ( сигБгад. збуіе .бор ) | 0) ; 
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// отслеживание перемещения мыши или освобождения ее кнопки 
босшпепб. опшоизешоѵе = бгадМоѵе; 
босишепб . оптоизеир = бгадЗбор; 

} 

} ; 

// Отслеживание перемещения мыши 
бипсбіоп бгадМоѵе (е) { 

// Нормализация объекта события 
е = біхЕѵепб ( е ) ; 

// Обеспечение отслеживания нужного элемента 
іб ( !сигБгад || е.багдеб == сигБгад ) гебигп; 

// Установка новой позиции указателя 
сигБгад. збуіе . ІеЕб = (дебХ(е)) + 'рх'; 
сигБгад. збуіе .бор = (дебУ(е)) + 'рх'; 

} 

// Ожидание окончания перетаскивания 
бипсбіоп бгадЗбор(е) { 

// Нормализация объекта события 
е = біхЕѵепб ( е ); 

// Перезапуск всех наших методов отслеживания 
сигБгад = босишепб .шоизешоѵе = босишепб.шоизеир = пиіі; 

} 

// Настройка объекта события для его нормализации 
бипсбіоп біхЕѵепб(е) { 

// Превращение всех ІЕ-ориентированных параметров в 
// ѴОС-подобные 
іб (!е) { 

е = иіпбом.еѵепб; 
е.багдеб = е. згсЕІешепб; 
е.ІауегХ = е.оббзебХ; 
е.ІауегУ = е.оббзебУ; 

} 

гебигп е; 

} 

тоизеоѵег 

Событие тоизеоѵег возникает, когда пользователь перемещает указатель мыши на текущий элемент с 
другого элемента. Если нужно узнать, с какого элемента пришел пользователь, используется свойство 
геІаіесГГагдеб Пример использования этого события показан в листинге Б. 18. 

тоизеоиі 

Событие тоивеоиі; возникает, когда пользователь перемещает указатель мыши за пределы элемента. 
Сюда включается перемещение указателя мыши с родительского на дочерний элемент (которое может поначалу 
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показаться не вполне очевидным). Если нужно узнать, к какому элементу пользователь перемещает указатель, 
используется свойство геІаіесГГагдеб 

В листинге Б. 18 показан пример прикрепления пар событий к элементам, чтобы позволить веб-странице 
использоваться в режиме управления с помощью клавиатуры (и мыши). Когда пользователь перемещает 
указатель мыши над ссылкой, или когда он для перехода на нее пользуется клавиатурой, ссылка получает 
дополнительное цветовое выделение. 

Листинг Б. 18. Создание эффекта прохождения с использованием событий тоивеоѵег и тоизеоиі 

// Обнаружение всех <а>-элементов для прикрепления к ним обработчиков 
// событий 

ѵаг а = боситепб . дебЕІетепбзВуТадЛате ( ' а ' ) ; 
бог ( ѵаг і = 0; і < а.іепдбб; і++ ) { 

// Прикрепление к <а>-элементу обработчиков событий тоизеоѵег 
// и босиз, которые изменяют фон на синий, когда пользователь 
// либо перемещает над ним указатель мыши, либо переводит на него 
// фокус (используя клавиатуру) 

а[ і ]. опшоизеоѵег = а[і].опбосиз = бипсбіоп() { 
ббіз . збуіе . ЪаскдгоипсІСоІог = ’Ыие'; 

} ; 

// Прикрепление к <а>-элементу обработчиков событий шоизеоиб 
// и Ыиг, которые возвращают белый фоновый цвет элемента, 

// когда пользователь уходит со ссылки 

а [ і ] . опшоизеоиб = а[і] .опЫиг = бипсбіоп() { 
ббіз . збуіе . ЬаскдгоипсіСоІог = 'икібе'; 

} ; 

} 

События клавиатуры 

События клавиатуры оперируют с со всеми случаями нажатия клавиш, как внутри, так и снаружи области 
ввода текста. 

кеусіоѵѵп / кеурге55 

Событие кеусіоѵѵп является первым событием, которое возникает при нажатии клавиши. Если пользовать 
продолжает удерживать клавишу нажатой, событие кеусіоѵѵп будет возникать снова и снова. Событие кеургевв 
является общепринятым синонимом события кеусіоѵѵп, их поведение практически идентично, за одним 
исключением: если нужно предотвратить исходное действие по нажатию клавиши, это следует делать в 
отношении события кеургевз. В листинге Б. 19 показан пример использования обработчика кеурге55, чтобы 
предотвратить нажатие определенных клавиш в пределах элемента <іпри1>. 

Листинг Б.19. Предотвращение отправки формы по нечаянному нажатию клавиши Епіег из элемента 
< і п риб> 

// Обнаружение всех имеющихся в документе элементов <іприб> 
ѵаг іприб = боситепб. дебЕІешепбзВуТадЛаше (' іприб '); 
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бог ( ѵаг і = 0; і < іпри'Ь. Іепд'Ыі; і++ ) { 

// Привязка обработчика кеургезз к элементу <іприб> 
іприб[і].опкеургезз = бипсбіоп(е) { 

// Предотвращение исходного действия, если нажата клавиша ввода 
гебигп е.кеуСобе != 13; 

} ; 

} 

кеуир 

Событие кеуир является заключительным возникающим событием клавиатуры (после события кеусіоѵѵп). В 
отличие от события кеусіоѵѵп, это событие возникает при освобождении лишь однажды (поскольку клавишу 
невозможно освобождать в течение довольно длительного периода времени). 

События форма 

События формы имеют отношение непосредственно к элементам <1огт>, <іприі>, <5еІес1>, <Ьи11оп> и 
<1ех(:агеа>, основных элементов НТМб-форм. 

зеіесі 

Событие зеіесі возникает, когда пользователь выделяет различные блоки текста в пределах области 
ввода, используя мышь. С помощью этого события можно переопределить порядок взаимодействия пользователя с 
формой. В листинге Б.20 показан пример использования события зеіесі для предотвращения выделения текста в 
поле формы. 

Листинг Б.20. Предотвращение выделения текста пользователем внутри элемента <1ех1;агеа> 

// Обнаружение первого элемента кбехбагеак на странице 
ѵаг бехбагеа = босишепб. дебЕІешепбзВуТадЛаше ('бехбагеа')[0]; 

// Привязка отслеживателя события зеіесб 
бехбагеа. опзеіесб = Сипсбіоп (){ 

// Когда осуществляется новое выделение, предотвращение действия 
гебигп баізе; 

} ; 


сНапде 

Событие сОапде возникает, когда значение элемента ввода (сюда включаются элементы <зеІес1> и 
<1ех1агеа>) изменяется пользователем. Это событие возникает, когда пользователь уже покинул элемент, и он 
утратил фокус. 

Код, показанный в листинге Б.21 способен отслеживать изменения и обновления в элементе, Ю которого 
имеет значение епІгуАгеа (элемент должен быть типа <1ех1;агеа>), в связанной с ним области предварительного 
просмотра его содержимого в реальном времени. 

Листинг Б.21. Отслеживание события сНапде для обновления связанного элемента 

// Отслеживание любых изменений 'епбгуАгеа' (типа <бех1;агеа>) 
босшпепб. дебЕІетепбВуІсІ ('епбгуАгеа') .опсПапде = бипсбіоп () { 
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// Как только область будет изменена, обновление 
// предварительного просмотра 

босшпепб. дебЕІетепбВуІс! (' ргеѵіеѵг ') . іппегНТМЬ = ЬНіз.ѵаІие; 


зиЬтіі: 

Событие зиЬтіІ: возникает только в формах, и только когда пользователь щелкнет на кнопке отправки — 
ЗиЬтіІ; (находящейся в пределах формы) или нажмет клавишу Епіег/Р1е(;игп на одном из элементов ввода. 
Привязав обработчик зиЬтіІ; к форме, и не привязывая обработчик сііск к кнопке ЗиЬтіІ:, вы обеспечите перехват 
всех попыток со стороны пользователя отправить данные формы. 

В листинге Б.22 показан код, отслеживающий первую форму на странице, перехватывающий отправку, и 
отображающий сообщение для пользователя, вместо отправки данных на сервер. 

Листинг Б.22. Использование 5иЬтіі для осуществления альтернативного действия 

// Привязка обработчика зиЪтіб к первой форме документа 
босшпепб. дебЕІетепбзВуТадЛате ('богт')[0]. опзиЪтіб = бипсбіоп(е) { 

// Получение имени, введенного пользователем 
ѵаг паше = босшпепб. дебЕІешепбВуІсі ('паше') . ѵаіие; 

// Установка в элемент <Ы> содержимого Привет, Имя! (где Имя — это 
// значение паше, введенного пользователем в форму) 
босшпепб . дебЕІетепбзВуТадЛате ( ' Ы ' ) [ 0 ]. ІппегНТМЬ = 

'Привет, ' + паше + ' ! ' ; 

// Предотвращение передачи данных формы на сервер 
гебигп іаізе; 

} ; 


гезеі 


Событие гезеі; возникает только если пользователь щелкнул на кнопке Ріезеі; (Сброс) внутри формы (в 
отличие от кнопки ЗиЬтіІ;, действие которой может быть продублировано нажатием клавиши Епіег). В 
листинге Б.23 показан пример отслеживания сброса данных формы (события ге5е1;), чтобы предоставить 
пользователю альтернативное действие. 

Листинг Б.23. Созданный наспех способ управления сбросом данных формы 

// Обнаружение первой формы на странице 

ѵаг іогш = боситепЬ. деЬЕІетепбзВуТадЛате (' іогт ')[0]; 


// Отслеживание щелчка на кнопке гезеб 
богш.опгезеЬ = бипсбіоп (){ 


// Обнаружение всех элементов <іприб> внутри формы 
ѵаг іприб = богш. деЬЕІешепЬзВуТадЛаше (' іприб '); 
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// и сброс их значений за счет присвоения пустой строки 
і:ог ( ѵаг і = 0; і < іприб. ІепдбЬ; і++ ) 
іприб[і].ѵаіие = 
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Приложение В Браузеры 

Программирование на ^ѵаБсгірІ всегда обуславливалось степенью разработки веб-браузеров. Поскольку 
использование ^ѵаЗсгірІ: за пределами браузерной среды (например, на стороне сервера) до сих пор не вышло за 
рамки экспериментов, набор функциональных возможностей этого языка имеет ярко выраженную браузерную 
направленность. Поэтому возможности, доступные в ^ѵаБсгірІ, очень тесно связаны с процессами развития 
браузеров, и с теми свойствами, которые их разработчики (или пользователи) считают наиболее важными. 

Современные браузеры 

Из всех браузеров, доступных в Интернете, есть лишь несколько, идущих в ногу со временем и 
поддерживающих самые последние технологии, и только немногие из них расширяют границы своих 
возможностей. В конечном счете тот круг браузеров, который будет выбран вами для поддержки, скорее всего 
будет зависеть от состава вашей аудитории и от того, сколько времени вы готовы потратить на то, чтобы 
создаваемое приложение нормально работало на каждом из этих браузеров. 

К слову сказать, теперь, по сравнению с прежними временами, создавать работоспособные ^ѵаБсгірІ- 
приложения стало намного легче. Благодаря процессу стандартизации многих методов (БОМ, ХМиннркециез!; и 
т.д.) пройдет еще немного времени, и для поддержки всех современных браузеров уже не придется прикладывать 
каких-нибудь дополнительных усилий. Но пока это время еще не настало, поэтому сегодня существует ряд 
наиболее популярных браузеров, и технологий, которые ими поддерживаются. 

Іпіегпеі Ехріогег 

Созданный компанией МісгозоЙ: и входящий в состав ее операционных систем (начиная с ѴѴІпсіоѵѵз 95), 
Іпіегпеі; Ехріогег на данный момент является наиболее популярным веб-браузером. С годами, как только МісговоД 
заняла доминирующие позиции на рынке браузеров, его развитие замедлилось. 

Недавно, в связи с выпуском новой операционной системы МісговоД ѴѴІпсІоѵѵз Ѵізііа (в состав которой 
вошел Іпіегпеі Ехріогег 7), команда разработчиков снова взялась за работу. 

Версии 5.5 и 6.0 

Версия 5.5 является обновлением версии ІЕ, принадлежащего ѴѴІпсіоѵѵв 98, а версия 6.0 является исходной 
для ѴѴІпсІоѵѵз ХР. Хотя обе эти версии так и не избавились от ошибок и от непоследовательности в своей 
реализации С55 и БОМ, они обладают хорошей функциональностью, которая может быть поддержана любым веб¬ 
приложением. 

Версия 7 

Это самая последняя версия браузера Іпіегпеі; Ехріогег, доступная для использования в ѴѴІпсІоѵѵ5 ХР и в 
ѴѴІпсіоѵѵз Ѵі5(;а. Пока ее применение ограничено, но ожидается, что с ростом популярности Ѵізііа круг ее 
пользователей также возрастет. 

Хотя в движке Эа ѵаЗсгірі; мало что изменилось, в механизме отображения была исправлена масса ошибок, 
связанных с С55. Для ЭаѵаБсгірІ; произошло лишь одно приметное событие, теперь для объектов ХМШНрКедиезІ: 
не требуется использование АсІіѵеХОІдіесІ:, и к ним (по умолчанию) имеется прямой доступ. 


МогіІІа 
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Родившийся на базе того, что осталось от ІМеГзсаре, МогіІІа представляет собой плоды усилий по 
разработки популярного браузера с открытым кодом. Благодаря последним выпускам РігеГох и ростом его 
популярности, МоііІІа завоевал передовые позиции в современной разработке браузеров. 

РігеГох 1.0, Меізсаре 8 и МогіІІа 1.7 

Все три этих браузера основаны на версии 1.7 движка отображения Сеско. Этот движок обладает полной 
совместимостью со всеми современными технологиями создания сценариев. Все эти браузеры отличаются 
хорошей надежностью, стабильностью и удобством в работе. 

РігеГох 1.5 и 2.0 

В самой последней версии движка отображения Сеско (1.8), использованной в последних версиях 
браузера РігеГох, поддерживается ряд новых усовершенствований, которые в ближайшие годы будут играть 
весьма существенную роль. Сюда включается частичная поддержка 5ѴС 1.1, поддержка элементов <сапѵаз>, и 
поддержка ІаѵаБсгірГ 1.6. Все эти свойства рассмотрены в главе 14. 

ЗаГагі 

БаГагі является результатом попытки компании Арріе создать лучший (по сравнению с неприглядным 
ІпГегпеГ Ехріогег 5) браузер для ОБ X. Сначала (в версии 1.0), его движок отображения работал грубовато, 
создавая проблемы разработчикам при создании полностью поддерживающего его кода. Но с новыми выпусками 
его движок постоянно совершенствовался. 

В наиболее распространенных версиях БаГагі (1.3 для ОБ X 10.3, 2.0 для ОБ X 10.4) устранены наиболее 
существенные ошибки, и добавлены новые возможности. Теперь в том, что ваше приложение, загруженное в 
БаГагі, вполне прилично работает, уже нет ничего необычного. 

Кроме того в этих браузерах введена поддержка нового элемента <сапѵаз>, весьма полезного свойства 
высокодинамичных приложений, позволяющего разработчикам рисовать на веб-странице. 

Орега 

Браузер Орега — ветеран браузерных войн с ІМеГзсаре и МісгозоГГ. Его популярность взлетела вверх после 
того как этот норвежский браузер стал совершенно бесплатным (до этого он поддерживался за счет рекламных 
вставок или продажи лицензии). Наряду с МогіІІа, Орега находится в стадии активной разработки и 
проектирования новой спецификации НТМІ_ 5, и реализации составляющих этой спецификации в своих браузерах. 

Версия 8.5 

Версия 8.5 стала первой, полностью свободной версией браузера Орега, поэтому она используется более 
широко, чем другие версии. Она надежно поддерживает все современные свойства, хотя разработчики время от 
времени сталкиваются с тем, что ее реализация С55 отличается от реализации в других браузерах; а вот 
реализация ІаѵаБсгірГ более чем достаточна. 

Версия 9.0 

В самом последнем обновлении браузера Орега устранен ряд ошибок в движке ІаѵаБсгірГ, а также 
добавлена поддержка нового элемента <сапѵаз>. 



